Reactjs 根据React中子/远程组件的未提交（状态）数据计算数据

TL；几年后回顾DR edit：只要只是状态数据，就没有一个解决方案是不重要的—您还需要以某种方式将其存储到某个单独的存储中，并在该点上可以执行任何您想要的操作。但是，如果你想了解更多的背景知识，请阅读问题和答案，并反复阅读

---

我有一个由两部分组成的表格，每个部分都有不同的输入值。假设这是一项调查。将数据输入到这是很简单的；我有典型的模型：

{ "sections": [ { "name": "a", values: { "A": 1, "B": 2, "C": 1, ... } }, ... ], ... }

以及组件层次结构，如：

<Survey>
  <Section> (for each section)
    <ValueRow> (for each value)

这将转化为当前状态的减少，而不是模型数据的减少。在React中，最好的方法是什么？流量、操作和存储似乎都在处理数据提交到模型后如何处理数据。我想做的是提取所有的状态数据并对其进行处理，但对于

SurveyWideStats

元素来说，它似乎也非常糟糕，例如，它会在兄弟元素的子元素的垃圾房里翻找

我目前的解决方案是传递一个累加对象，并为每个组件提供足够的状态，以便它可以在发生变化时继续调用它。这看起来很清楚，划分也很清楚，但这意味着我必须有两个过程，并且必须小心不要在渲染期间开始摆弄状态（至少因为那是我调用累积对象的时候-我想在生命周期中可能有一个更好的点，我可以调用它）。此外，这似乎是“从服务器端获取”渲染的一个障碍

最好的办法是什么？是否有一个既定的模式？最好是这样一种模式，即这些东西不必一直如此定制，并且真正适合数据？

有两种方法可以做到这一点：

将整个表格作为道具传递给最高部分。
在survey的render函数中，计算统计信息，然后将它们作为道具传递给组件，然后在表上为其他子组件执行foreach循环。这样，您的stats组件是一个纯组件，不需要状态，也不需要插入兄弟

在存储中创建一个stats函数，并让组件调用它来获取stats。注意：最好不要将统计数据保存在存储中，因为它显然是派生数据。除非出于性能原因

希望这有帮助

更新：
要在用户更改输入值时处理其更改，您有两个选项，具体取决于您的首选项：

（选项1描述纯组件）

（使用通量模式时）：将输入控件的值放入道具中。每当用户进行更改时，启动一个更新商店的操作，并让商店传递更新的道具。因此（顶部）组件会注意到一个更改事件并重新加载。这会创建或多或少的“实时”更新，例如，当用户在输入字段中键入单个字符时，页面标题会立即更新。带有输入控件的组件没有（也不需要）设置状态。在非常大的组件树中，此设置可能会变慢（因为对于每个角色，整个树都会重新渲染）。但react是超快速的，并且只在de-tree中智能地呈现更改

将初始属性值置于状态（在getInitialState（）中），并将输入值也置于状态。典型示例：用户在输入字段中键入一个字符，更改将触发setState（），组件将再次呈现。只有当用户单击某个保存或提交按钮时，才会触发一个操作以将值保存到存储中

更新：
作为奖励，下面是更新存储和组件的流程。

---

这两个都意味着当我更改

ValueRow

的输入控件中的值时，我不应该使用

setState

，对吗？我应该怎么做？2.基本上就是我现在所做的，所以1.如果要解决必须在状态下偷看的问题，我只需要查看模型（这是通过道具滴下来的）.但这意味着2.只会在一定程度上起作用，应该避免使用道具，以免让事情变得更难-对吗？是的，避免使用道具是一种很好的做法。状态存在于组件内部（可能会作为道具传给儿童）。但父组件永远无法直接知道状态（因此没有“偷看”）。告诉父组件状态更改的唯一方法（例如，用户单击“保存”按钮）是完整循环：有状态的子组件触发操作->存储更新并发出更改->父组件读取存储并重新呈现子组件->子组件获取新道具。（如果希望有状态的子级使用新的道具执行某些操作，则需要componentWillReceiveProps函数来更新状态）是的，这与我的直觉很吻合。我的想法是在保存之前不向模型对象提交任何内容，但我想，如果我区分保存UI模型对象的存储区和最终将模型发送到服务器及其持久性，这一切都会成功。但这也意味着商店必须对每个“叶子”进行镜像操作这是模型上的编辑器可以操作的。@Jesper。只要组件本身及其子组件需要知道状态，您就可以将其置于状态。只要任何父组件、存储或服务器需要知道更改，您就需要发送一个动作来告诉全世界。我不确定“存储必须有动作”是什么意思镜像更改模型编辑器可操作的每个“叶子”

<Survey>
  <SurveyWideStats>
  <Section> (for each section)
    <SectionWideStats>
    <ValueRow> (for each value)