reactjs React_访问状态数组

jyztefdp  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(89)

我需要有条件地更新数组order的状态(检查是否重复),但无法访问函数addToBasket中的order值。同时,它被更新,我可以访问我的第一个console.log(参见下面的代码片段):

const [order, setOrder] = useState<IGoodsCart[]>([]);
  console.log(order); **//1 visible**

  const addToBasket: AddToBasketFunc = (item) => {
    console.log(order); **//2 not visible**
    const itemIndex = order.findIndex((orderItem) => orderItem.id === item.id);
    if (itemIndex < 0) {
      const newItem = {
        ...item,
        quantity: 1,
      };
      setOrder((order) => [...order, newItem]);
    } else {
      const newOrder = order.map((orderItem, index) => {
        if (index === itemIndex) {
          return {
            ...orderItem,
            quantity: orderItem.quantity + 1,
          };
        } else {
          return orderItem;
        }
      });
      setOrder(newOrder);
    }
  };

字符串
最好的办法是什么?
我想使用useRef挂钩,但希望有另一个最好的解决方案,这种情况下。

mo49yndu

mo49yndu1#

看起来像是在状态更新之前/之后调用函数。如果没有更多的代码,很难判断,但我可以看到两个选项。
一种是将当前的order作为参数传递给你的函数,并在你使用它的任何地方提供它。第二种选择是将你的逻辑移动到updater函数中,它也将给予你对当前order的访问权。
在我看来,选择1会更理想一些。

备选案文1。

在这里,我们将order作为参数添加到函数中,然后你需要记住在使用函数的地方传递它:

const [order, setOrder] = useState<IGoodsCart[]>([]);

  //...

  const addToBasket: AddToBasketFunc = (item, order) => { // added parameter
    const itemIndex = order.findIndex((orderItem) => orderItem.id === item.id);
    if (itemIndex < 0) {
      const newItem = {
        ...item,
        quantity: 1,
      };
      setOrder((order) => [...order, newItem]);
    } else {
      const newOrder = order.map((orderItem, index) => {
        if (index === itemIndex) {
          return {
            ...orderItem,
            quantity: orderItem.quantity + 1,
          };
        } else {
          return orderItem;
        }
      });
      setOrder(newOrder);
    }
  };

  //...

  addToBasket(item, order); // add this parameter wherever you call this function

字符串

**备选案文2。

在这里,我们使用updater函数中提供的当前状态,并在那里执行更多逻辑:

const [order, setOrder] = useState<IGoodsCart[]>([]);

const addToBasket: AddToBasketFunc = (item) => {
  setOrder((order) => {
    const itemIndex = order.findIndex((orderItem) => orderItem.id === item.id);
    if (itemIndex < 0) {
      const newItem = {
        ...item,
        quantity: 1,
      };
      return [...order, newItem]; // update state
    } else {
      const newOrder = order.map((orderItem, index) => {
        if (index === itemIndex) {
          return {
            ...orderItem,
            quantity: orderItem.quantity + 1,
          };
        } else {
          return orderItem;
        }
      });
      return newOrder; // update state
    }
  });
};

相关问题