使用React useState()钩子异步更新状态对象上的多个属性

Question

const [obj, setObj] = useState{
id1: false,
id2: false,
...
})
const someFunc = async(id)=> {
setObj({...obj, [id]: true})
await longApiCall()
setObj({...obj, [id]: false})
}

这个函数被调用几次(或多次(，这应该将两者都设置为true，然后都设置为false，但它们几乎同时完成。因为设置状态是异步的，所以每个设置状态只会将一个状态翻转为false，因为第二个状态会将其重写为true。

确保状态对象始终获得正确更新的最佳方法是什么？我知道我可以在不使用状态设置器的情况下使用ref或直接在obj上设置属性，但我希望保持这种状态更改导致重新发布的行为。

// after calls are finished
obj = {
id1: true,
id2: false
}
//desired outcome
obj = {
id1: false,
id2: false
}

Answer 1

请改用set state的函数版本。React会把状态的最新值传给你，你可以从中计算出新状态：

const someFunc = async(id)=> {
setObj(prev => {
return {...prev, [id]: true};
});
await longApiCall();
setObj(prev => {
return {...prev, [id]: false};
});
}

Answer 2

这是我能想到的最干净的解决方案。

const objMimic = useRef({})
const someFunc = async(id)=> {
objMimic.current[id] = true
setObj({...obj, [id]: true})
await longApiCall()
objMimic.current[id] = false
setObj({...objMimic.current})
}