reactjs - 在componentDidMount内部的回调中设置状态

我当前正在使用React 16.3（React Native），写为here，它表明我应该在componentDidMount而不是componentWillMount内发出任何异步请求，因为这将很快被弃用。

不幸的是，当我试图在componentDidMount内获取数据时，我收到了无操作警告，并将从axios请求返回的数据设置为我的状态。

这是一个片段

export default class MyComponent extends Component {
    state = {
      myData: []
    }

    componentDidMount() {
      axios.get('api-endpoint')
      .then(res => this.setState({ myData: res.data })
    }
    render() { return <View>...</View> }
}

和警告-

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 MyComponent component.

最佳答案

这就是在组件中包含异步代码的问题。例如，当Promise解析（可能需要几秒钟）时，用户可能已经导航到应用程序的另一部分，因此，当Promise解析并尝试执行setState时，您会收到以下错误：尝试更新已卸载的组件。

我的建议是为异步逻辑使用类似redux-thunk，redux-saga或redux-observable之类的东西。但是，您可以进行简单的检查-但这是一种反模式：

export default class MyComponent extends Component {
    state = {
      myData: []
    }

    componentDidMount() {
      this.isMounted = true;

      axios.get('api-endpoint')
      .then(res => {
        if(this.isMounted) {
          this.setState({ myData: res.data })
        }
      })
    }

    componentWillUnmount() {
      this.isMounted = false;
    }
    render() { return <div>...</div> }
}

关于reactjs - 在componentDidMount内部的回调中设置状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49941991/