在 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

当你使用括号声明一个函数体时，需要return一个值，即下一个状态。没有函数体的箭头函数使用隐式（vs 显式）return.

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

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

Using prevState Callback function in UseState react Hook

javascript

function

reactjs

react-hooks

use-state