setState: One of the sources for assign has an enumerable key on the prototype chain

[jojjesv]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-4250U CPU @ 1.30GHz
Memory: 28.78 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.2.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.2, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.2
API Levels: 23, 25, 26, 27, 28
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.13 => 16.4.13
@types/react-native: ^0.56.15 => 0.56.15
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

Running an RN app on iOS results in a runtime crash with setState. The debugger stops at the following line:

Where key == "constructor" and nextSource is an instance of State (which derives from BaseDialogState).

Reproducible Demo

this.state is instantiated in constructor with this.state = new BaseDialogState(); where:

export class BaseDialogState {
  dismissButtonPos?: { x: number, y: number } = null;
  visible: boolean = false;
}

Then modify the component state:

requestAnimationFrame(() => {
  if (becomesVisible) {
    this.onBecameVisible();
    this.setState({
      visible: true
    });
  } else {
    this.onBecameInvisible();
  }
})

[NachoJusticia]

Experimenting same issue with fetch + getDerivedPropsFromState...

[mhuggins]

I'm seeing this in react-native when trying to call refetch in a react-apollo Query.

import React from 'react';
import { Text, View } from 'react-native';
import { Button } from 'react-native-paper';
import { Query } from 'react-apollo';

function DefaultError({ error, refetch }) {
  return (
    <View>
      <Text>Error: {error.message}</Text>
      <Button icon="refresh" mode="contained" onPress={refetch}>Retry</Button>
    </View>
  );
}

function MyScreen(props) {
  const { renderLoading: Loading, renderError: Error, renderData: Data } = props;

  return (
    <Query query={props.query}>
      {(args) => {
        if (args.loading) return <Loading {...args} />;
        if (args.error) return <Error {...args} />;
        return <Data {...args} />;
      }}
    </Query>
  );
}

MyScreen.defaultProps = {
  renderError: DefaultError,
  renderLoading: DefaultLoading,
};

[mhuggins]

Never mind, looks like it was a function binding issue on my end. Had to replace this:

onPress={refetch}

with this:

onPress={() => refetch()}

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.