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

Question

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

按钮 (select) 嵌套在 material ui 手风琴中呈现的数组对象发票，并且应该更改日期（现在仅一年）和保存它，同时比较它的 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

这个怎么样

<SimpleForm addInvoiceDate={(date) => addInvoiceDate(date, invoice)} date={invoice.invoiceDate}/> 在边栏的 return
从 SimpleForm 中删除状态，因为我们现在有一个 date 道具
<select value={date} required onChange={(e) => addInvoiceDate(e.target.value)}> 在 SimpleForm 的 return

有问题请留言

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

Passing an object Id by submit button in order to find and change value in array after submiting (react)

javascript

arrays

reactjs

object

submit-button