将 props 从 redux 映射到组件状态

Posted 2023-02-22

【中文标题】将 props 从 redux 映射到组件状态

【英文标题】：Map props from redux to component state

【发布时间】：2018-09-13 19:19:07

【问题描述】：

过去两周我一直在使用 React 和 Redux，但我并不完全确定一切是如何工作的，经过数小时的搜索，并没有真正找到我需要的信息，我决定问 ????

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

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

function mapStateToProps( auth ) 
    return  auth ;


export default connect(mapStateToProps) (ExampleComponent);

这很好用，但是当我尝试将此道具存储在组件的状态中时，问题就出现了。我尝试在组件的构造函数上设置状态，它只是将事物设置为空。

显然，这是我不太明白的，道具从包含一个空的“auth”字段开始，然后一秒钟后，auth 被该 mapStateToProps 信息填充。

如果我在组件的 render 方法中调用这些道具，它工作得很好，但如果我想将 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
            );
        
    

请对react和redux有更好理解的人对此有所了解吗？谢谢！

【问题讨论】：

您可以尝试在componentWillReceiveProps生命周期中设置状态。顺便说一句，你为什么要设置状态，而你总是可以设置一个动作来修改你的减速器中的道具？

我会直接对 props 进行操作，而不是将其分配给 store。在每次更新 redux-store 时，您必须注意新的组件状态，这会导致创建样板代码 imo

请注意，您不应该在render() 中设置状态。当您调用setState() 时，它会触发render，从而循环。

这是您所拥有的异步流的问题。看看this的答案

哇，非常感谢大家的帮助！ @TriyugiNarayanMani 你是对的，使用它，效果很好！我唯一担心的是该方法似乎不安全？ ????reactjs.org/docs/…

【参考方案1】：

componentDidMount 在组件安装后触发一次。但是每次 redux 状态更新并且您的组件使用此状态字段时，redux 都会向您的组件发送新的 props。 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

【讨论】：

谢谢安德鲁！这很好用，不过我有点担心……reactjs.org/docs/…

componentWillReceiveProps 现已弃用

【参考方案2】：

componetDidMount 只会在组件被挂载时被调用。 所以你必须使用 componentWillReceiveProps，它会在 props 更改时被调用。

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

【参考方案3】：

我遇到了像你这样的问题，我意识到你可以使用 componentWillReceiveProps 或 getDerivedStateFromProps 但你需要触发本地状态更改来映射新的道具。我尝试了一些情况，但我不知道它何时会自动更改，所以我编写了这个函数以在调度操作时重新渲染：

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

这不是最好的解决方案，但这是轻松做到这一点的最佳方法。