React_访问状态数组

Question

我需要有条件地更新数组

order

的状态（检查重复项），但无法访问函数

order

内的

addToBasket

值。 同时它已更新，我可以在我的第一个

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

钩子，但希望针对这种情况有另一个最佳解决方案。

Answer 1

看起来您正在更新状态之前/之后调用您的函数。如果没有更多代码，很难说，但我可以看到两个选项。

一种是将当前的

order

作为参数传递给您的函数，并在您使用它的任何地方提供它。第二个选项是将您的逻辑移至更新程序函数中，这也将使您能够访问当前的

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。

这里我们利用更新器函数中提供的当前状态并在那里执行更多逻辑：

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
    }
  });
};