我如何通过功能组件在对象的多维数组中设置状态

Question

如何将inCart的值更改为true  根据ID， 就像我有一个提供id的函数，并以该id为基础，我想将第一个对象inCart值更改为true或将第二个对象inCart值更改为

我尝试过这样：

setInfo({ info[id].inCart: true })
/*Note: id is a parameter that hold the number like 1 or 2 etc*/

const [info, setInfo] = useState([
        {
            id: 1,
            title: "Google Pixel - Black",
            inCart: false
        },
        {
            id: 2,
            title: "Samsung S7",
            inCart: false,
        }  
])

Answer 1

尝试Array#find查找参考，对其进行变异，然后返回状态的浅表副本。

const [info, setInfo] = useState([
  {
    id: 1,
    title: 'Google Pixel - Black',
    inCart: false
  },
  {
    id: 2,
    title: 'Samsung S7',
    inCart: false
  }
]);

const idToChange = getId();

setInfo(info => {
  const matchingCart = info.find(cart => card.id === idToChange);
  matchingCart.inCart = !matchingCart.inCart;
  return [...info];
});