javascript - 自上而下的渲染 - 如何解决预填充输入字段中的状态

Question

场景：我有一个反应应用程序，它的状态在通量存储（异步加载）中，将数据向下传递到根组件，根组件将数据传递给它的子组件等等。

现在：文本输入字段，嵌套在节点树的某个深处，其初始值在 getInitialState 中从一个 prop 完成（该 prop 已向下传递），并且在 onChange 事件上其状态设置为类型值。到目前为止书的例子。现在让我们“提交”表单，触发动作，ajax 调用，返回的数据发生变化，传递到向根组件发出事件的存储，节点树再次重新渲染，但当然 getInitialState 没有被触发再次，该字段仍然具有最后输入的值。我不认为我想在每次击键时启动整个 action-store-root-children-reRender 循环，对吗？

问题：如何使输入的状态从传递的道具（商店之一）中保持新鲜

想法：嗯，我实际上可以通过在 ROOT 的 componentWillUpdate() 中设置一个商店“标志”然后在 componentDidUpdate() 中设置它来判断我何时从 ROOT 开始重新渲染 - 然后所有子组件都可以知道它是否是 ROOT 意图重新渲染还是只是父非存储发起的更改。

Answer 1

首先，您正在做的是反模式。state 不应该设置为等于 props。你的道具不应该是状态。

React 文档对更新道具非常清楚。查看此链接：https ://facebook.github.io/react/docs/component-specs.html

组件WillReceiveProps（对象 nextProps）

您应该考虑实施此生命周期方法，它将帮助您了解道具更改。

但是请考虑将 props 和 state 分开 - React Framework 两者兼有是有原因的。但这是一个不同的话题。

EDIT1：如果您想更新您的商店状态，请调用一个通量操作，该操作引用相应的商店并在上述生命周期方法中将道具作为有效负载传递。

希望这有帮助。

Answer 2

将表单的值保留在存储中，并且根本不使用任何本地组件state。编辑表单时触发操作以更新商店并重新呈现应用程序。