在UseState react Hook中使用prevState回调函数

Question

我在filteredProducts变量中有一些产品数组，希望根据价格和新添加的产品对它们进行排序。当像这样使用prevState而回调函数中没有{ }时，代码运行良好。

useEffect(() => {
if(sort === "newest") {
setFilteredProducts((prevState) => 
[...prevState].sort((a, b) => a.createdAt - b.createdAt)
);
}
else if (sort === "asc") {
setFilteredProducts((prevState) => 
[...prevState].sort((a ,b) => a.price - b.price)
);
}
else {
setFilteredProducts((prevState) => 
[...prevState].sort((a, b) => b.price - a.price)
);
}
}, [sort]);

但是当使用{ }进行类似的prevState回调函数时

if(sort === "newest") {
setFilteredProducts((prevState) => {
[...prevState].sort((a, b) => a.createdAt - b.createdAt)
});
}

，它只是在控制台中抛出错误。

Answer 1

当使用方括号时，您正在声明一个函数体，并且需要返回一个值，即下一个状态。没有函数体的箭头函数使用隐式(与显式(返回。

setFilteredProducts((prevState) => {
return [...prevState].sort((a, b) => a.createdAt - b.createdAt);
});