时间戳

首页 > 解决方案 > 在 React 中使用 prevState 修改父组件中的状态

javascript - 在 React 中使用 prevState 修改父组件中的状态

问题描述

我目前有一个包含“全局”状态的 Main.js 文件。但是，要修改该状态，这意味着我将所有函数都放在 Main.js 中以更新状态。当然这意味着 Main.js 文件变得太大了。

我正在使用 React.lazy 实现一些代码拆分。但是，我不确定如何将这些函数移动到子组件以便能够更新全局状态。

实现各种级别的嵌套对象和/或数组的状态很复杂。因此，我需要使用 prevState 和扩展运算符来修改和/或填充深度嵌套的对象。

如何正确访问子组件中的 prevState 以便能够安全地更新状态中的深层嵌套对象？

我目前在 Main.js 中的代码示例可能如下所示：

updateObject = (objectA3, newProp1, newProp2) = {

    this.setState(prevState => {
       //some code here

       return ({
         objectA: {
            ...prevState.objectA
            [objectA3]: {
               ...prevState.objectA[objectA3]
               newProp1: "some value",
               newProp2: "some other value"
            }
          }
        })
     }
}

因此，由于我正在更新的状态的复杂性，我可以采取什么方法将这些功能移动到适当的子组件中，以便我可以更新主组件中的状态。

我遇到了类似这个链接的东西，它看起来很有希望在 Main.js 组件中使用通用函数。但是，我无法理解如何为复杂状态实现这种机制。

标签： javascriptreactjs

解决方案

我建议不要尝试在组件层次结构中上下传递状态，而是将您的状态移到存储区，并让需要获取或设置状态的组件与存储区通信。Redux实现了这种模式，但是有很多方法可以做到这一点。一种方法可以使用更高阶的组件，该组件通过道具提供状态获取器和设置器。

这是一个带有连接方法的商店的相对愚蠢的概念验证演示：

class Store {
	connect(Component) {
  	return () => <Component store={this} />
  }
  get foo () {
  	return 'this is foo from the store';
  }
}

const store = new Store();

function SomeComponent (props) {
	return (
  	<div>SomeComponent: Foo: {props.store.foo}</div>
  )
}

const Connected = store.connect(SomeComponent);

function App () {
	return (
  	<Connected />
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

推荐阅读