Question

过去两周我一直在使用React和Redux，而且我不完全确定一切是如何运作的，经过几个小时的搜索后我并没有真正找到我需要的信息我决定问一下

我正在使用React创建的webapp，并使用redux来处理一些事情，例如身份验证状态。在这种情况下，我使用Google身份验证（passportjs + google plus api）。我从我的mongoDB获取用户的信息并将其存储在redux存储的状态中。这很好。

然后，从特定组件，我目前正在使用：

function mapStateToProps({ auth }) {
    return { auth };
}

export default connect(mapStateToProps) (ExampleComponent);

这很好用，但问题来自于我尝试将此道具存储在组件的状态中。我已经尝试在组件的构造函数上设置状态，它只是将事物设置为null。

显然，这是我真正理解的，道具首先包含一个空的＆＃39; auth＆＃39;字段，然后一秒钟后，auth充满了mapStateToProps信息。

如果我在组件的render方法中调用那些props，它可以正常工作，但是如果我想将this.props.auth的值存储在组件的状态中，它就不会工作。

我是否以错误的方式思考这一切？我不明白流程是如何工作的还是......？我不知道为什么道具开始时为空，并在以后修改。

我还尝试过使用props值修改状态的函数，并从组件的render方法（已包含props）中调用该函数，但它会创建一个无限循环。

    setInitialStates() {
          this.setState({
                val1: this.props.auth.val1,
                val2: this.props.auth.val2,
                val3: this.props.auth.val3
          });
    }

render() {
        if(this.props.auth) {
            this.setInitialStates();
        }
        ...
    }

我也尝试在ComponentDidMount中调用此setState，但它似乎没有做任何事情！

componentDidMount() {
        if(this.props.auth) {
            this.setState({
                val1: this.props.auth.val1,
                val2: this.props.auth.val2,
                val3: this.props.auth.val3
            });
        }
    }

有人能够更好地了解反应和减少吗？谢谢！

Answer 1

安装组件后，

componentDidMount触发一次。但是每当redux状态更新并且你的组件使用这个状态字段时，redux就会向你的组件发送新的道具。 componentWillReceiveProps会检查每一个新的道具。

componentWillReceiveProps(nextProps) {
      this.setState({
            val1: nextProps.auth.val1,
            val2: nextProps.auth.val2,
            val3: nextProps.auth.val3
      });
}

请注意

此生命周期现已弃用，名为UNSAFE_componentWillReceiveProps。请查看以下链接以查看替代方案。

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Answer 2

只有在装入组件时才会调用

componetDidMount 。所以你必须使用 componentWillReceiveProps ，这会在道具变化时被调用。

为了更好地理解，请查看： https://levelup.gitconnected.com/componentdidmakesense-react-lifecycle-explanation-393dcb19e459

Answer 3

我正面临像您这样的问题，我意识到您可以使用componentWillReceiveProps或getDerivedStateFromProps，但是您需要触发本地状态更改以映射新的道具。我尝试了某种情况，但不知道它何时会自动更改，因此我编写了此功能以便在分派操作时重新渲染：

setCount() {
    let {count} = this.state;
    this.setState({count: count++});
}

这不是最佳解决方案，但这是轻松实现此目的的最佳方法。

将道具从redux映射到组件状态

3 个答案: