ReactJS中如何为每行的DatePicker和TimePicker设置默认值

看起来你遇到的核心问题是渲染多行选择器时，没有正确绑定数组的索引，导致所有行都复用了数组第一个元素的值。下面我给你一步步拆解解决方案，结合你的场景来调整代码：

问题根源 #

你当前的代码在渲染additionalFields数组时，可能没有把每个元素的索引（index）传递给对应的DatePicker/TimePicker组件，也没有根据索引去读取和更新对应位置的状态值，所以所有行都默认取了数组的第一个元素。

具体修复步骤 #

1. 渲染列表时带上索引，并绑定对应的值 #

在使用map渲染数组时，一定要带上第二个参数index，这样每个行组件都知道自己对应数组的哪个位置。然后在DatePicker和TimePicker的value属性中，直接使用当前遍历到的field对象的date/time（或者通过index取additionalFields[index].date，效果一致）。

2. 处理 onChange 事件时，根据索引更新对应状态 #

因为React状态是不可变的，更新数组元素时不能直接修改原数组，需要做浅拷贝：

• 先复制整个数组
• 再复制对应索引位置的对象，修改其中的date或time属性
• 最后用新数组更新状态

修复后的代码示例 #

假设你原来的渲染逻辑是这样的：

{additionalFields.map((field) => (
  <div className="field-row">
    <DatePicker value={field.date} onChange={handleDateChange} />
    <TimePicker value={field.time} onChange={handleTimeChange} />
  </div>
))}

改成下面这样：

{additionalFields.map((field, index) => (
  <div key={index} className="field-row">
    {/* DatePicker 绑定对应索引的date值 */}
    <DatePicker
      value={field.date}
      onChange={(newSelectedDate) => {
        // 复制数组，避免直接修改原状态
        const updatedFields = [...additionalFields];
        // 复制对应索引的对象，修改date属性
        updatedFields[index] = { ...updatedFields[index], date: newSelectedDate };
        // 更新状态
        setAdditionalFields(updatedFields);
      }}
    />

    {/* TimePicker 绑定对应索引的time值 */}
    <TimePicker
      value={field.time}
      onChange={(newSelectedTime) => {
        const updatedFields = [...additionalFields];
        updatedFields[index] = { ...updatedFields[index], time: newSelectedTime };
        setAdditionalFields(updatedFields);
      }}
    />
  </div>
))}

关键注意点 #

• key的使用：给每个行元素加上key={index}，帮助React识别列表项的变化，避免渲染异常（如果你的数组元素有唯一id，用id作为key会更优）。
• 不可变更新：一定要通过拷贝数组和对象来修改状态，不能直接做additionalFields[index].date = newDate这种操作，否则React检测不到状态变化，不会重新渲染组件。
• 默认值初始化：确保additionalFields数组的每个元素都有date和time的初始值，比如：

  const [additionalFields, setAdditionalFields] = useState([
    { date: new Date(), time: '12:00' },
    { date: new Date(), time: '14:00' }
    // 更多初始行...
  ]);
  

这样修改后，每行的DatePicker和TimePicker就会对应additionalFields数组中各自位置的默认值，更新时也只会修改对应行的状态了。

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