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

Posted 2023-03-13

【中文标题】React - 通过对象数组映射以在 Material UI 中创建日期文本字段

【英文标题】：React - Map through array of objects to create Date TextFields in 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

【参考方案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 会更好，因为它必须是唯一的:)