reactjs - 触发 2 个 Redux Actions ，仅触发 1 个动作

Question

我已经在以下方面采取了行动componentDidMount：

componentDidMount() {
  this.props.getQuests();
}

并且想在完成后触发另一个动作，我使用了生命周期方法componentWillReceiveProps

componentWillReceiveProps = async nextProps => {
  if (nextProps.questObject.length !== 0) {
    const authToken = await AsyncStorage.getItem("authToken");
    this.props.getProfile(authToken);
  }
};

然而，只有this.props.getQuests();被解雇，第二个动作this.props.getProfile(authToken)没有被解雇。

const mapStateToProps = ({ quest, profile }) => {
  const { error, loading, questObject } = quest;

  const { profileObj } = profile;

  return { error, loading, questObject, profileObj };
};

export default connect(
  mapStateToProps,
  { getQuests, getProfile }
)(HomeScreen);

目前它返回以下错误：

Warning: Can't call setState (or forceUpdate) on an unmounted 
component. This is a no-op, but it indicates a memory leak in your 
application. To fix, cancel all subscriptions and asynchronous tasks in 
the componentWillUnmount method.

Answer 1

您正在尝试在挂载之前更新 DOM。当您使用componentWillReceiveProps时，请确保您比较this.props了最新的道具，即。nextProps否则，componentWillReceiveProps将不必要地渲染组件，从而可能导致无限循环。

    componentWillReceiveProps = nextProps => {
      if (this.props.questObject !== nextProps.questObject && 
          nextProps.questObject.length !== 0) {
       try {
             const authToken = await AsyncStorage.getItem("authToken");
             this.props.getProfile(authToken);
          } 
         catch(e) {
              console.log(e); 
         }
      }
    };