Question

我正在使用React，并且像这样将mode的值传递给孩子：

<Child mode={this.state.mode}/>

我可以在子类中从父项成功获取mode值。

接下来，我希望能够从子类中更新父类中的mode，因此我将updateModeState传递给子类并创建了实现此功能的函数：

<Child updateModeState={this.updateModeState} eyemode={this.state.eyemode}/>

这就是我在父类中所拥有的：

class Parent extends BaseComponent {

    state = {
        mode: 'mode 1',
    }

    updateModeState(mode) {
        this.setState({
            mode: mode
        });
    }

    render() {
        return <Child updateModeState={this.updateModeState} eyemode={this.state.eyemode}/>
    }

}

现在，在Child中，我有一个应切换状态的onClick方法：

class Child extends BaseComponent {
    onClick() {
        if (this.props.mode == 'mode 1') {
            this.props.updateModeState('mode 2');
            console.log(this.props.mode);
            // Still logs "mode 1"
        } else {
            this.props.updateModeState('mode 1');
            console.log(this.props.mode);
            // Still logs "mode 2"
        }            
    }
}

如代码中的注释所示。我正在更新状态，但是道具没有更新。我以为道具总是与状态保持同步，那为什么在设置状态后道具没有立即更新？

我还研究了Redux，并在Parent类中创建了另一个方法来返回state的值。

我追求的选择是否可行？还是我提到的其他2个更好的做法？

Answer 1

在安装组件时设置组件的道具。安装后更改它们不会在安装的组件内部更新它们。

您有几种方法可以解决此问题。首先看一下componentWillReceiveProps和getDerivedStateFromProps钩子。本文可能有助于理解它们：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

基本上，您想将父母的道具保存在孩子的状态下并使用它。当父母将新的道具传递给孩子时，您要检测到它并更新孩子的状态。这些钩子将帮助您做到这一点。

Answer 2

常规信息：我不建议您直接发送所有状态对象，否则将其作为对象进行更改。 React使用浅比较来了解更改了哪些道具。而且它不会检查对象的每个部分。浅层比较将检查对象的引用。您可以根据需要发送状态的每个部分。并且将要进行更新。

您可以在 class 组件中使用getDerivedStateFromProps。是静态的 React的生命周期方法。但这会触发每个道具的变化。而且仍然应该在生命周期方法中检查新需要的道具，以免不必要地重新渲染。

作为摘要：

class Child extends BaseComponent
{
  static getDerivedStateFromProps(newProps, currentState)
  {
    if (newProps.some !== currentState.some)
    {
      return ({ some: newProps.some }); // it will make change the state with new prop value
    }

    console.log(newProps); // also you can listen the changes for simple debugging

    return null; // if nothing changed
  }

....
}

官方文档 ：（尚不足以理解，但仍然可以）https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

另一方面，您可以为子组件设置一个类似<Child key={this.state.eyemode} ....的键。但是，在使用键时，出于性能原因，您应该小心。如果要更改每个键的键都不必要地渲染，那么在这种情况下不是很好的解决方案。

https://reactjs.org/docs/reconciliation.html#keys

传递给子代的支持值确实具有父代状态的最新值-React

2 个答案: