React父子组件间single source of truth的存储位置咨询

毫无疑问，你的场景里单一数据源必须放在主表单里，原因和实践逻辑如下：

• 你的核心需求是主表单要随时持有所有组件的输入数据，用于后续的REST API请求。如果把数据源分散在每个子组件内部，你需要额外写大量同步逻辑，把每个子组件的数据同步到主表单，不仅冗余，还很容易出现数据不一致的问题（比如子组件更新了，但主表单没及时同步）。
• 正确的做法是把主表单作为唯一数据源，子组件做成受控组件：主表单给每个子组件传递对应行的数据，以及一个更新数据的回调函数；子组件只负责渲染输入框，当用户输入内容时，调用回调函数通知主表单更新数据源。

举个简单的代码示例（React语法）：

// 主表单组件
function MainForm() {
  // 初始化一行空数据
  const [rows, setRows] = useState([{ field1: '', field2: '', field3: '' }]);

  // 更新指定行的数据
  const updateRow = (index, newData) => {
    const updatedRows = [...rows];
    updatedRows[index] = { ...updatedRows[index], ...newData };
    setRows(updatedRows);
  };

  // 添加新的一行组件
  const addRow = () => {
    setRows([...rows, { field1: '', field2: '', field3: '' }]);
  };

  // 提交API请求，直接用rows数据即可
  const handleSubmit = () => {
    fetch('/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ rows })
    });
  };

  return (
    <div>
      {rows.map((row, index) => (
        <CustomRow
          key={index}
          rowData={row}
          onUpdate={(newData) => updateRow(index, newData)}
        />
      ))}
      <button onClick={addRow}>添加新行</button>
      <button onClick={handleSubmit}>提交表单</button>
    </div>
  );
}

// 自定义子组件（受控组件，无内部状态）
function CustomRow({ rowData, onUpdate }) {
  return (
    <div className="row">
      <input
        value={rowData.field1}
        onChange={(e) => onUpdate({ field1: e.target.value })}
        placeholder="字段1"
      />
      <input
        value={rowData.field2}
        onChange={(e) => onUpdate({ field2: e.target.value })}
        placeholder="字段2"
      />
      <input
        value={rowData.field3}
        onChange={(e) => onUpdate({ field3: e.target.value })}
        placeholder="字段3"
      />
    </div>
  );
}

这么做的额外优势：

• 数据统一管理，主表单随时能拿到完整的最新数据，不需要额外做数据聚合，直接用于API请求。
• 子组件职责单一，只负责渲染和触发更新，没有状态逻辑，复用性更强。
• 后续要加批量操作（比如批量清空、批量修改某字段）会非常方便，因为所有数据都在主表单的状态里。

内容的提问来源于stack exchange，提问作者usama rashad