React Native / Redux-只能更新已安装或正在安装的组件

Question

I am just fetching the items from server and displaying them in the list component. The component structure is like

ServiceScreen(parent) -> ServicesList(child- used inside ServiceScreen) -> ServiceItem (child used inside ServicesList)

Every thing works well and it displays the services fetched but it gives me the following warning

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the YellowBox component.

Code is as follows

ServiceScreen.js

constructor(props) {
    super(props);
    this.props.actions.fetchServices();
  }
    render() {
        const { isFetching } = this.props;
        return (
          <View style={styles.container}>
            <ServicesList services={this.props.services} navigation={this.props.navigation} />
          </View>
        );
      }

ServicesList.js

render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
            data={this.props.services}            
            renderItem={
                ({ item }) => 
                <ServiceItem navigation={this.props.navigation} item={item} />
            }
        />
      </View>
    );
  }

ServiceItem.js

render() {
        const { item } = this.props;
        return (
            <TouchableOpacity onPress={this.singleService}>
                <Text>{item.service_name}</Text>
            </TouchableOpacity>
        );
    }

As I am using redux for state management, I have mapped the services state to my ServiceScreen component. And I am passing down it to child component.

Answer 1

You should dispatch the action in componentDidMount. The constructor is called before the component is mounted, which is why you're seeing the error.

Here's a diagram with the react lifecycle. You should only call methods that change state in the "commit" phase.

Answer 2

This error is firing exactly when said in the yellowBox. Somewhere you trying to update already unmounted component. I handled this issue by using temporary variable componentIsMounted: bool and wrapping setState method:

class SomeClass extends Component {
  constructor(props) {
    this._isComponentMounted = false;
  }

  componentDidMount() {
    this._isComponentMounted = true;
  }

  componentWillUnmount() {
    this._isComponentMounted = false;
  }

  setState(...args) {
    if (!this._isComponentMounted) {
      return;
    }

    super.setState(...args);
  }
}

Also, you should remember that you should not call state updates before the component get mounted (it`s not an alternative way - just an addition).