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

Posted 2023-02-21

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

【英文标题】：React - Map through array of objects to edit Date TextFields in Material UI

【发布时间】：2021-09-24 13:54:33

【问题描述】：

我问过我的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)
      />
    )
  )

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

【参考方案1】：

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

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

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

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

【讨论】：

感谢您的意见。对于您的第二点，我没有将步骤设置为状态值的唯一原因仅仅是因为如果步骤数量变大，我将不得不继续将对象添加到状态数组，我不太喜欢这样做。现在，步骤常量位于不同的文件中，因此易于管理且不会弄乱我的组件。

我会试试你的潜在解决方案。

我建议将过滤器放在 value 属性中，是的，但它会引入很多问题，例如那个问题。一个 hacky 解决方案是使用 ||操作员。您也可以为它们提供本地状态值，然后在提交时执行过滤器进行编辑，或者如果该名称没有现有值，则将它们添加到 dateOfSteps 数组中。最简单的解决方案是简单地过滤在编辑页面上显示的“步骤”，并且仅当它们在 dateOfSteps 中具有现有值时才包含它们（您可以使用类似的过滤器，只是在地图上而不是在值字段上）

感谢您的建议。您最后一点的唯一问题是我希望用户不仅可以编辑（即修改他们之前输入的日期），而且还能够修改他们可能已经离开的日期（即在其他步骤中添加新的日期） .

在这种情况下，您可以使用步骤中的数据初始化 setDatesOfSteps，并为日期值加上空引号？