React - 通过对象数组映射以在 Material UI 中编辑日期文本字段

Question

我问过我的previous question，我问过如何在映射的对象数组上设置值。但是，我现在想弄清楚如何编辑这些值（如果它们存在）。

例如，假设我有一个对象数组：

const steps = [
  {
    id: 1,
    name: start
  },
  {
    id: 2,
    name: middle
  },
  {
    id: 3,
    name: end
  }
]

在我的一个文件中，我通过这个对象数组进行映射，以使用 Material UI 创建一个日期类型的 TextField。这看起来像：

{steps.map((step, index) => {
  return (
    <TextField
      id={step.id}
      label={step.name}
      type={"date"}
      onChange={event => handleStepDateChange(event.target.value, step.name)}
    />
  )
})}

我已经定义了一个单独的状态来检查用户选择了哪些日期（因为他们可以将更多步骤的日期留空）。初始状态声明只是一个空数组，如下所示。

const [datesOfSteps, setDatesOfSteps] = useState([])

因此，我实现了一个onChange 处理程序，它将每个选定的日期添加到对象数组中。从上面调用的 onChange 处理程序如下所示：

cost handleStepDateChange = (dateSelected, stepName) => {
  setDatesOfSteps([
    ...datesOfSteps,
    {
      date: dateSelected,
      name: stepName
    }
}

本质上，每次用户为一个步骤选择一个日期时，都会在数组中输入一个新条目。这一切都可以很好地将日期存储在数组中。

我的问题是： 但是，现在假设我在我的网站上的某个地方可以让用户在保存日期后“编辑”日期。我希望用户能够查看他们之前选择的日期。为此，我需要能够在 TextField 组件中有一个 value 属性，以便我可以将日期中的每个值设置为之前保存的值（这是从后端存储和检索的）。

如何在原始映射中设置 value 属性？如何将变量放入 value 属性中？

{steps.map((step, index) => {
    return (
      <TextField
        id={step.id}
        label={step.name}
        type={"date"}
        //value={WHAT DO I INCLUDE HERE}
        onChange={event => handleStepDateChange(event.target.value, step.name)}
      />
    )
  })}

我希望这很清楚，如果不是，请告诉我。

Answer 1

一个潜在的解决方案是根据名称过滤（），例如：

{datesOfSteps.filter((dateStep) => {
  if (dateStep.name = step.name) {
    return dateStep.date
  }
}
}

从 step.name 值中找到正确的日期值，但我不推荐该解决方案。

将“步骤”包含一个包含日期的状态值，而不是将与每个步骤关联的日期值存储在单独的数组中不是更好吗？它会在值更改时重新呈现，但任何受控输入字段也将重新呈现。