在另一个setState钩子的回调中使用setState

Question

当在React中使用useState钩子时，我有一个场景，我想这样使用它：

const [count, setCount] = useState(0);
const [page, setPage] = useState(0);
setCount(currentCount => {
if (currentCount > 0) {
setPage(0);
return 0;
}
return currentCount + 1;
});

像这样嵌套使用它们被认为是不好的做法吗？如果是，是否有任何文件说明为什么这是一种不良做法？

Answer 1

您在外部回调中将计数设置为undefined：您没有使用return关键字，并且退出时没有返回值的函数在JavaScript中返回undefined。在状态设置器的内部调用中，您将关闭来自外部回调的currentCount的值，并创建一个计算结果为大于该值的1的表达式。

这可能是一个错误，原因有二：

1. undefined将导致程序中依赖于状态的number类型的任何代码出现问题

2. 状态更新可能是异步的，因此不能保证外部回调将在内部调用状态设置器之前或之后完成执行。

相反，这种模式将提供确定性行为：

setCount(currentCount => {
const useZero = currentCount > 0;
if (useZero) setPage(0);
return useZero ? 0 : currentCount + 1;
});

Answer 2

试试这样的东西：

const [count, setCount] = useState(0);
const [page, setPage] = useState(0);
useEffect(() => {
if (count > 0) {
setPage(0);
setCount(0);
}
}, [count]);