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

Question

我目前正在使用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.

Answer 1

这就是组件中存在异步代码的问题。例如，当 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> }
}