setStates序列在api调用中不工作，为什么?

Question

我试图在从api调用中检索一些数据后设置两个状态。

const [value1, setValue1] = useState();
const [value2, setValue2] = useState();
const getValues = async () => {
await valuesService
.getValuesFromBackEnd(params)
.then(data => {
setValue1(data.value1);
setValue2(data.value2);
});
};

上面的代码只适用于setValue1。如果改变setStates的顺序，它只适用于setValue2。如果我在它们之前添加一个useDispatch，它们就可以完美地工作，设置这两个状态。如果我将它们中的一个放入setTimeOut函数中，也可以正常工作。有人能解释一下为什么会这样吗?按预期工作的代码示例:

const [value1, setValue1] = useState();
const [value2, setValue2] = useState();
const getValues = async () => {
await valuesService
.getValuesFromBackEnd(params)
.then(data => {
setValue1(data.value1);
setTimeout(() => {
setValue2(data.value2);
}, 3000);
});
};

或

const [value1, setValue1] = useState();
const [value2, setValue2] = useState();
const dispatch = useDispatch();
const getValues = async () => {
await valuesService
.getValuesFromBackEnd(params)
.then(data => {
dispatch (something);
setValue1(data.value1);
setValue2(data.value2);
});
};

Answer 1

当您同时设置多个状态位的实例时，最好使用useReducer而不是setState。肯特·多兹(Kent Dodds)有一篇很棒的文章。

最终，并不是value1和value2都没有被设置，而是，当使用useState'set'方法时，它们并没有真正同时被更新。首先更新value1，它触发渲染，然后更新value2，触发另一轮渲染。当您使用useReducer时，您可以同时更新两者。