Question

所以我已经重写了一些代码以使用状态而不是修改道具，因为这不是我应该做的。现在发生的问题是，当componentDidMount运行props时，仍然没有从后端获取props，因此函数中的if语句始终为false。

componentDidMount() {
    this.props.getTypes('sport');
    this.props.getSchema();
    this.props.getDomainForm();

    if(Object.keys(this.props.schema).length) {
        this.setState({schema: this.props.schema})
    }
    if(Object.keys(this.props.formData).length) {
        this.setState({form: this.props.formData})
    }
}

const mapStateToProps = (state) => {
    return {
        schema: state.admin.settings.Domains.schema.data || {},
        formData: state.admin.settings.Domains.domain.data || {},
        types: state.admin.settings.Domains.types.data || {},
    }
};

我已经遍历了代码，似乎componentDidMount只运行一次。由于componentWillRecieveProps已过时，因此我不确定该如何解决，希望大家能帮助我解决这个问题。

PS。提取动作没有问题，reduce可以正常工作。我在那里没有做任何更改，redux调试器正确显示了结果。

Answer 1

作为componentWillReceiveProps的替代方法，引入了static getDerivedStateFromProps(props, state)方法，每次组件接收到新的道具时都会调用该方法，因此它可能对您有所帮助。这是docs。

Answer 2

我认为问题在于您的提取是异步的，并且花了一点时间来完成任务，并且在提取完成之前，您的组件已安装在DOM上。

如您所述，您可以看到数据是通过redux调试器接收的，并且它没有问题，所以我猜测您已将初始状态作为空对象或数组传递给了状态。因此，您的组件会通过props接收数据，并且您不会更新状态以重新渲染该组件，您需要做的就是只要通过检查当前props是否接收到新数据就使用componentWillReceiveProps来更新状态。不等于以前的道具，像这样的一些代码：

componentWillReceiveProps = (nextProps) => {
    if(this.props.yourPropsFromRedux != nextProps.yourPropsFromRedux ) {
      this.setState({ yourState: nextProps.yourPropsFromRedux })
    }
  }

Answer 3

将componentDidUpdate与componentDidMount一起使用更适合这种情况。 componentDidMount将设置初始渲染的状态，componentDidUpdate将设置未来渲染的状态。不要忘记使用当前的props测试componentDidUpdate方法的prevProps参数，以检查数据是否已更改。在此处阅读documentation

在componentDidMount

3 个答案: