我正在尝试创建一个具有以下功能的表单：用户首先查看包含该日特定信息的日期列表，可以单击某一天，然后以唯一形式编辑该日信息，该表单以模式显示。因此，列表从状态显示数据，并且表单将状态显示为表单中输入的defaultValue。表单应具有保存更改并取消的功能，该功能应关闭表单并忘记用户可能进行的任何更改。
问题在于表单正在显示状态值，但是当我按“取消”时，我正在进行的更改仍会发送到状态，从而更新了日期列表的视图。
作为用户，我应该期望在开始编辑之前先看到原始数据，但是我看到的是改变主意时所做的编辑。
这是一个重新创建问题的代码沙箱... codeSandbox recreating issue
这似乎是非常基本的功能，但是我似乎找不到任何信息。我在这里错过了一些基本的React概念吗？
答案 0 :(得分：2)
道具在React中通过引用传递。在您的示例中，您将days数组一直传递到Form.js。在Forms.js的第30行，获取输入字段的新值并将其存储在days[...].shifts[...].message中，这将更改最顶部组件的原始状态对象中的值。因为这是通过更改状态对象而不是通过setState来完成的，所以这些更改要等到其他条件触发最顶层组件的重新渲染后才能看到，此时新值将显示在按钮列表中。
一种解决方案是在message组件中存储一个临时Form状态变量，如果用户单击Submit，则将该当前值作为参数传递回this.props.onSubmit并让顶层组件使用该值正确更新days数组（必要时更改真实状态）。