如何在 Material UI 中设置日期文本字段的值答案

【问题标题】：How to set value of a Date Textfield in Material UI如何在 Material UI 中设置日期文本字段的值
【发布时间】：2021-09-25 11:15:20
【问题描述】：

我有一个对象数组，其中每个对象都包含一个 id 和一个日期值。例如，我的数组，称为 stepDates，可能看起来像这样：

[
  {
    id: 1,
    date: "2021-07-23"
  },
  {
    id: 2,
    date: null
  },
  {
    id: 3,
    date: null
  }
]

我还有另一个对象数组，其中包含您在上面看到的对象的更多信息。这个数组看起来像：

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

我正在尝试遍历上述数组中的每个对象，以使用 TextField 和 Material UI 显示日期（无需用户自己选择日期）。但是，在为 TextField 组件设置 value 属性时出现错误。现在，我有这个：

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

给定以上内容，我试图显示来自stepDates 的每个对象的日期（如果它存在），否则，如果它为空，我只想显示未选择的日期字段，例如“dd/mm/年年”。

但是，在执行上述操作时，我遇到了两个不同的错误。日期字段存在的第一个错误给了我以下信息：

指定值“2021-07-23,,,,,,,,,,,,,”不符合所需格式，“yyyy-MM-dd”

日期为空的第二个错误给了我这个错误（如上所述，每个为空的日期两次）：

指定的值“,,,,,,,,,,,,”不符合所需格式，“yyyy-MM-dd”

【问题讨论】：

您使用的是map，但我认为您的意思是使用filter？对于map，如果找不到该值，则该值将是一个包含所有undefined 的数组，或者某些值设置为日期，而所有其他值未定义，如您所示，如果有匹配项。尝试filter 代替（我的意思是value 道具）。
感谢您的建议。我最初使用filter，但正在尝试其他方法。使用filter，我收到错误The specified value "[object Object]" does not conform to the required format, "yyyy-MM-dd"。不过，这个错误只发生过一次，我不确定它发生在哪里。
是的，因为您从过滤中获取了整个对象，您需要在检查是否找到它之后从中取出日期。实际上，find 是一个更好的选择这里。喜欢stepObjects.find(stepDate => stepDate.id === step.id)?.date || "dd/mm/yyyy"。如果找到对象，则获取日期，否则为dd/mm/yyyy。
Filter 还返回一个数组，所以它仍然需要一些后处理。

标签： javascript reactjs react-native react-hooks material-ui

【解决方案1】：

您将要使用find 而不是map。所以你的价值属性看起来像这样：

value={stepDates.find(stepDate => stepDate.id === step.id).date}

【讨论】：

是的，很抱歉。感谢您的关注！
谢谢！我会试试看的。
很高兴听到！祝你好运！