通过提交按钮传递对象 ID，以便在提交后查找和更改数组中的值（反应）

Question

我想在从选择按钮中选择新日期后更新嵌套在数组中的对象的值，然后提交它以更改它。

按钮（选择）嵌套在来自材料 ui 的 Accordion 中呈现的数组对象发票中，并且应该更改日期（现在仅一年）并在比较其 ID 号时保存它。

我有两个组件：sideBar 和 simpleForm

const SideBar = ({ className }) => {
  const [invoices, setInvoice] = useState([
    { label: 'Test', invoiceDate: '2021', id: 0 },
    { label: 'Test', invoiceDate: '2022', id: 1 },
    { label: 'Test', invoiceDate: '', id: 2 },
  ])


  const addInvoiceDate = (date, invoice) => {
    setInvoice(
      invoices.map((x) => {
        if (x.id === invoice.id)
          return {
            ...x,
            invoiceDate: date,
          }
        return x
      })
    )
  }

  return (
    <>
      <Wrapper>
        <S.MainComponent>
          <div>
            {invoices.map((invoice) => {
              return (
                <Accordion>
                  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                    <div key={invoice.id}>
                      {invoice.label}
                      {invoice.invoiceDate}
                    </div>
                  </AccordionSummary>
                  <AccordionDetails>
                    <SimpleForm addInvoiceDate={addInvoiceDate} />
                  </AccordionDetails>
                </Accordion>
              )
            })}
          </div>
        </S.MainComponent>
      </Wrapper>
    </>
  )
}

简单形式：

const SimpleForm = ({ addInvoiceDate }) => {
  const [date, setDate] = useState('')
  const handleSubmit = (e) => {
    e.preventDefault()
    addInvoiceDate(date)
  }

  function range(start, end) {
    return Array(end - start + 1)
      .fill()
      .map((_, placeholder) => start + placeholder)
  }

  const Years = range(2021, 4000)
  const Options = []
  Years.forEach(function (element) {
    Options.push({ label: element, value: element })
  })

  return (
    <form onSubmit={handleSubmit}>
      <select value={date} required onChange={(e) => setDate(e.target.value)}>
        {Options.map((option) => (
          <option value={option.value}>{option.label}</option>
        ))}
      </select>
      <input type='submit' value='Save' />
    </form>
  )
}

我的问题是，我不知道如何成功地将数组对象的 id 号传递给 addInvoiceDate（更改发票日期），以便在原始数组中找到它，比较它然后提交新值。我正在测试添加一个具有新年份值的新对象并且它有效，但在这种情况下，我不必找到对象的 id。如果我想真正找到前一个并通过比较 id 来更新它，那就有点困难了。

任何想法应该如何做？可能我忽略了一些东西或者还没有足够的经验:)

Answer 1

这个怎么样

1. <SimpleForm addInvoiceDate={(date) => addInvoiceDate(date, invoice)} date={invoice.invoiceDate}/> 在 SideBar 的回归
2. 从 SimpleForm 中移除状态，因为我们现在有一个 date 属性来代替
3. <select value={date} required onChange={(e) => addInvoiceDate(e.target.value)}> 在 SimpleForm 的返回中

有问题请留言