Question

我已经如下设置了useState挂钩。

  const [products, setProducts] = useState([
    {
      id: 1,
      qty: 0,
    },
    {
      id: 2,
      qty: 0,
    }
  ]);

我有一个TouchOpacity组件，当按下它时会触发以下功能。

 const _onPress = () => {
    const productArr = products;
    productArr[0].qty = value;
    setProducts(productArr);
  };

预期结果是ID为1的产品必须将数量增加到1，但这不会发生。

当我按如下所示对状态的产品使用价差运算符时，它会按预期工作。

 const _onPress = () => {
    const productArr = [...products];
    productArr[0].qty = value;
    setProducts(productArr);
  };

这是什么原因？

Answer 1

请注意，在两个示例中，即使使用了传播算子，您都在改变状态。

如果您需要在状态或嵌套结构中使用数组，我强烈建议您尝试使用immer之类的库，它可以简化事情，比重新创建对象更有效，并且总体上可以为您提供很好的帮助不改变状态的观念：

import produce from "immer";

const [products, setProducts] = useState([
  {
    id: 1,
    qty: 0,
  },
  {
    id: 2,
    qty: 0,
  }
]);

const _onPress = () => {
  setProducts(
    produce(products, draft => draft[0].qty = value)
  );
}

功能组件状态下的数组值未更新

1 个答案: