提问人：Dmitry 提问时间：11/14/2023 更新时间：11/16/2023 访问量：23
React_Access到状态数组
React_Access to state array
问：
我需要有条件地更新数组的状态（检查重复项），但无法访问函数中的值。
同时它已更新，我在我的第一个访问中可以访问那里（请参阅下面的片段）：orderorderaddToBasketconsole.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
答：
1赞
Sebastian Kaczmarek
11/16/2023
#1
看起来您正在更新状态之前/之后调用函数。没有更多的代码很难分辨，但我可以看到两个选项。
一种是将电流作为参数传递给函数，并在使用电流的任何地方提供电流。第二种选择是将您的逻辑移动到 updater 函数中，这也将使您能够访问当前。orderorder
在我看来，选项 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
}
});
};
评论