reactjs useState更新对象数组中的特定对象

我正在做一个杂货清单项目。在这个项目中，当用户输入一个项目时，我希望能够编辑该项目。我将所有东西都存储在我状态的对象数组中。我的对象的结构是：

{
 product: 'toast',
 category: 'bakery',
 quantity: 3,
 type: 'each
},
{
 product: 'apple',
 category: 'produce',
 quantity: 2,
 type: 'each'
},
{
 product: 'hamburger',
 category: 'meat',
 quantity: 1,
 type: 'Lb'
}

我想要做的是让用户在卡片类型函数中选择其中一个对象，然后更新它。目前，我可以将项目添加到列表中，但无法更新它们

我尝试了

setList（list[I].txt=v）

和

setList（list=>list[I].product=v）

以及其他尝试以特定对象为目标的变体。任何想法都将不胜感激

下面是我的主要app.js代码。注意：

const Change（）

是我试图更新对象的地方。我传入的变量来自item.js代码

import React ,{useState,useEffect} from 'react';
import List from './components/list';
import Header from './components/header';

function App() {
  const [list, setList] = useState([]);
  const Add = (p, c, q, t, crt) => {
    console.log({product: p, category: c, quantity: q, type: t, cart: crt})
    setList(list=>[...list,{product:p, category:c, quantity:q, type:t, cart: crt}])
  }
  const Change = (i, txt, v) => {
    //setList(list[i].txt=v)
    console.log('id: ' + i + ' topic: ' + txt + ' value: ' +v)
    setList(list=>list[i].product=v)
  }
  const Delete = () => {

  }
  return (
    <div>
      {console.log(list)}
      <h1>Grocery List App</h1>
      <Header add={Add}/>
      <List set={setList} lst={list} chg={Change} del={Delete} />
    </div>
  );
}

export default App;

---

您希望实现

更改

功能。是这样吗

试试这个

const Change=（i，txt，v）=>{
setList（list.map）（e，ei）=>{
如果（ei==i）{
e、 乘积=v；
返回e；
}
返回e；
}));
}

您想调用带有列表的

setList

，在该列表中您只需修改一个对象。 您可以为此使用

list.map（）

。理想情况下，您希望向对象添加ID字段

但即使没有ID，也可以使用索引：

setList(list.map((product, index)=>{index == i ? v : product}))

或者更详细：

const Change = (i, txt, v) =>{
    const newList = list.map((product, index) => {
        return index == i ? v : product
    });
    setList(newList);
}

---

e.product=v

正在直接设置状态，这是您在React中不应执行的操作。当我运行您的答案时，我得到以下错误`第13:40行：应为赋值或函数调用，而不是看到一个表达式未使用-expressions@PaulCarlson我更新了我的答案，请尝试更详细的版本

setList(list.map((product, index)=>{index == i ? v : product}))

const Change = (i, txt, v) =>{
    const newList = list.map((product, index) => {
        return index == i ? v : product
    });
    setList(newList);
}