React - 通过对象数组映射以在 Material UI 中创建日期文本字段答案

【问题标题】：React - Map through array of objects to create Date TextFields in Material UIReact - 通过对象数组映射以在 Material UI 中创建日期文本字段
【发布时间】：2021-09-22 10:39:51
【问题描述】：

我有一组对象，它们表示某个流程中的不同步骤，其中每个步骤都有一个 ID 和名称。对象数组如下所示：

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

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

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

我现在有两个问题：

为每个步骤创建状态以便我可以在 TextField 组件中创建 onChange 事件并将每个日期存储在各自状态中的最佳方法是什么？

现在，我已经声明状态几乎可以模仿对象数组，但我不确定这是最好的方法，因为添加的步骤越多，它就会失控：

const [stepDates, setStepDates] = useState({
  start: null,
  middle: null,
  end: null
})

如果我确实声明了上述状态，我该如何在onChange 事件中实际设置每个状态的值？

到目前为止，我已经这样做了：

<TextField
  id={step.id}
  label={step.name}
  type={"date"}
  value={step.name}
  onChange={event => {
    const val = event.target.value
    setStepDates(prevState => {
      return { ...prevState, step.start: val } 
    })
  }
/>

但是，根据上述情况，我在step.start 周围收到错误消息：

解析错误：“，”预期

【问题讨论】：

您的解析错误是由于标签使用无效，step.start: val 只要不括在括号中就无效[step.start]: val

标签： javascript reactjs typescript react-native react-hooks

【解决方案1】：

您正在做的很好，要解决您的问题，您可以动态引用一个键：

<TextField
  key={step.id}
  id={step.id}
  label={step.name}
  type="date"
  value={step.name}
  onChange={event => {
    const val = event.target.value
    setStepDates(prevState => ({ ...prevState, [step.name]: val }))
  }
/>

您实际上并不需要初始化每个状态项，如果它不存在，您可以假设它为 null/undefined：

const [stepDates, setStepDates] = useState({})

stepDates.middle // it returns undefined

【讨论】：

一个id 会更好，因为它必须是唯一的:)