React中点击提交按钮传递对象ID更新数组内嵌套对象值的实现问询

核心问题是当前链路缺少「将当前操作的invoice ID传递给更新方法」的逻辑，按以下步骤修改即可完成需求：

步骤1：补全参数传递链路 #

有两种可选实现方式，任选其一即可：

方案A：给SimpleForm传递当前发票对象 #

首先修正SideBar中列表key的挂载位置（React要求循环渲染的最外层元素绑定key），同时新增props把当前循环到的invoice对象传给SimpleForm：

{invoices.map((invoice) => {
  return (
    // key绑定到循环返回的最外层元素
    <Accordion key={invoice.id}>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <div>
          {invoice.label}
          {invoice.invoiceDate}
        </div>
      </AccordionSummary>
      <AccordionDetails>
        {/* 新增currentInvoice参数传递当前发票对象 */}
        <SimpleForm addInvoiceDate={addInvoiceDate} currentInvoice={invoice} />
      </AccordionDetails>
    </Accordion>
  )
})}

再修改SimpleForm的提交逻辑，调用更新方法时传入双参数：

// 新增接收currentInvoice参数
const SimpleForm = ({ addInvoiceDate, currentInvoice }) => {
  const [date, setDate] = useState('')
  const handleSubmit = (e) => {
    e.preventDefault()
    // 同时传递选中的年份和当前发票对象
    addInvoiceDate(date, currentInvoice)
    // 可选：提交后清空选择框
    setDate('')
  }
  // 剩余代码保持不变...
}

方案B：提前绑定参数（无需修改SimpleForm） #

如果不想给SimpleForm加额外props，可在SideBar传递方法时直接绑定当前invoice参数，SimpleForm原有代码不用做任何调整：

<SimpleForm addInvoiceDate={(date) => addInvoiceDate(date, invoice)} />

可选优化：避免闭包异常 #

建议修改addInvoiceDate的状态更新为函数式写法，避免因闭包拿到旧的invoices数组导致更新错误：

const addInvoiceDate = (date, invoice) => {
  setInvoice(
    // 使用函数式更新拿到最新的数组快照
    prevInvoices => prevInvoices.map((x) => {
      if (x.id === invoice.id)
        return {
          ...x,
          invoiceDate: date,
        }
      return x
    })
  )
}

内容的提问来源于stack exchange，提问作者P H