React点击列表项添加至表格报错问题排查求助

我有两个经映射渲染的列表项，点击绑定了onClick={(e) => handleCheckClick(ele)}的div时，希望将点击的项显示在表格中，但出现了错误。

相关代码 #

handleCheckClick函数 #

function handleCheckClick(ele) {
 if (trayItems?.length > 0) {
     settrayItems(
       trayItems.map((item) => {
         return { ...item, quantity: item.quantity + 1 };
       })
     );
   } else {
     settrayItems([...trayItems, ele]);
   }
 }

列表项映射渲染代码 #

<div>
{
    item && item.filter((person) => person.status == "0").map((ele) => {
        return (
            <div
                className="newmo-card"
                style={styles.innerbox}
                onClick={(e) => handleCheckClick(ele)}>
                {`${ele.item}`}
                <br />
                <span> {`${ele.total_price}`}</span>
            </div>

        );
    })
}
</div>
<Tray trayItems2={trayItems} trayItems1={trayPrice} /> 

表格组件代码 #

function Tray({ trayItems }) {
    return (
      <>
      <div className="foo">
        <table>
          {trayItems &&
                trayItems.map((ele, index) => {
                  return (
                    <tr key={index}>
                      <td>{ele.item}</td>
                      <td>{ele.price}</td>
                      <td>{ele.quantity}</td>
                    </tr>
         
        </table>
      </div>
    </>
  );
}

问题修正方案 #

1. 修复Props传递不匹配 #

父组件给Tray传递的是trayItems2，但子组件接收的是trayItems，导致表格拿不到数据。修改父组件的Tray调用：

<Tray trayItems={trayItems} />

2. 修正点击逻辑错误 #

当前逻辑会给所有项的quantity加1，而非针对点击的项。正确逻辑应该是判断点击项是否已存在，存在则更新数量，不存在则添加新项并初始化quantity：

function handleCheckClick(ele) {
  settrayItems(prevItems => {
    const existingItem = prevItems.find(item => item.item === ele.item);
    if (existingItem) {
      return prevItems.map(item => 
        item.item === ele.item 
          ? { ...item, quantity: item.quantity + 1 } 
          : item
      );
    } else {
      return [...prevItems, { ...ele, quantity: 1 }];
    }
  });
}

3. 统一数据字段名 #

列表项显示的是total_price，但表格用了price，字段不匹配。修改表格中的字段：

<td>{ele.total_price}</td>

4. 修复语法错误 #

表格组件的map函数未闭合，补上缺失的})：

function Tray({ trayItems }) {
    return (
      <>
      <div className="foo">
        <table>
          {trayItems &&
                trayItems.map((ele, index) => {
                  return (
                    <tr key={index}>
                      <td>{ele.item}</td>
                      <td>{ele.total_price}</td>
                      <td>{ele.quantity}</td>
                    </tr>
                  );
                })}
        </table>
      </div>
    </>
  );
}

内容的提问来源于stack exchange，提问作者vivek kn