我正在尝试制作一个具有功能的表单，用户首先查看包含该天特定信息的日期列表，可以单击某一天，然后编辑有关该天的信息的唯一表单显示为模态。因此，列表显示来自状态的数据，表单将该状态显示为表单中输入的默认值。表单应具有保存更改和取消的功能，这应关闭表单并忘记用户可能所做的任何更改。
问题是表单显示状态的值，但是当我按取消时，我正在进行的更改仍然被发送到状态，从而更新了天数列表的视图。
作为用户，我应该期望在开始编辑之前看到原始数据，但我看到的是我改变主意时所做的编辑。
这是一个重新创建问题的代码沙盒... 代码沙盒重新创建问题
这似乎是非常基本的功能，但我似乎找不到任何信息。我在这里错过了一些基本的 React 概念吗？
道具在 React 中按引用传递。在您的示例中，您将days数组一直传递到Form.js。在Forms.js的第 30 行，您获取输入字段的新值并将其存储在days[...].shifts[...].message中，这会更改最顶层组件的原始状态对象中的值。因为这是通过改变状态对象而不是通过setState来完成的，所以在其他地方触发最顶层组件的重新渲染之前，不会看到更改，此时新值将显示在按钮列表中。
一种解决方案是在Form组件中存储一个临时message状态变量，如果用户单击"提交"，则将当前值作为参数备份传递给this.props.onSubmit，并让顶级组件使用该值正确更新days数组(根据需要更改真正的状态(。
工作示例如下：https://codesandbox.io/s/9oqxlwol4o