在循环中设置状态 React Native

Question

我有一些对象数组形式的道具，我用它们来更新我的“项目”状态。我能够遍历对象并构建包含“product_id”和“数量”的对象。当我只是 console.log 时，我可以看到正确的数据，但是当我尝试更新状态时，我得到了错误"Too many re-renders, react limits the number of renders to prevent an infinite-loop." const [items, setItems] = useState(    {      product_id: 93,      quantity: 2,    },    {      product_id: 22,      variation_id: 23,      quantity: 1,    },  );  const cart = props.cart;  Object.keys(cart).forEach(function (key) {    const prod = {      product_id: cart[key].id,      quantity: cart[key].quantity,    };    setItems((currentItems) => {      return {prod, ...currentItems};    });  });编辑我的购物车道具是使用以下代码从 redux 中提取的function mapStateToProps(state) {  return {    cart: state.cart,  };}export default connect(mapStateToProps)(Checkout);问题是这个 prop 的属性不仅仅是我需要的数量和 id。

Answer 1

您不需要在循环中一次又一次地设置状态。相反，只是在数组上循环，获取项目并最终设置状态

   const [items, setItems] = React.useState(

    {

      product_id: 93,

      quantity: 2

    },

    {

      product_id: 22,

      variation_id: 23,

      quantity: 1

    }

  );

  const { cart } = props;

  useEffect(() => {

    const products = Object.entries(cart).map(([key, { id, quantity }]) => ({

      product_id: id,

      quantity: quantity

    }));

    setItems(currentItems => ({ ...products, ...currentItems }));

  }, [cart]);

Answer 2

您应该使用数组或对象作为状态。您将两个单独的对象传递给 useState，用适当的键将它们包装在一个对象中。或使用数组。

it seems you have forgotten to add a wrap your initial object inside curly braces.  

const [items, setItems] = useState([

  {

    product_id: 93,

    quantity: 2,

  },

  {

    product_id: 22,

    variation_id: 23,

    quantity: 1,

  },

]);  

然后

return [prod, ...currentItems];  

作为一个建议：

最好制作新对象并将它们一次全部设置在状态中。

const objectsToAdd = Object.values(cart).map(function (cartItem) {

  return {

    product_id: cartItem.id,

    quantity: cartItem.quantity,

  };

});

setItems((currentItems) => {

  return [...objectsToAdd, ...currentItems];

})