我有一个带有两个状态变量的 React 功能组件(itemsData
和 itemsCollections
)。变量在 useEffect
方法中更新。但是在 useEffect
发生之后,其中一个状态变量是 null
。
切换 setStateFunctions (setItemsData
& setItemsCollect
) 调用顺序后,两个参数都按预期初始化。
怎么样?
const MyComponent = ({itemsIds}) => {
const [itemsData, setItemsData] = useState([]);
const [itemsCollections, setItemsCollect] = useState({});
useEffect(() => {
fetchItemsData({ itemsIds }).then(({ items, itemCollect }) => {
setItemsData(items);
setItemsCollect(itemCollect);
})
}, [itemsIds]);
...
console.log('itemsData', itemsData) // the expected array
console.log('itemCollect', itemCollect) // empty objecy
useEffect 后的状态:itemCollect = {}, itemsData = [{value:...},...]
切换调用顺序:
const MyComponent = ({itemsIds}) => {
...
useEffect(() => {
fetchItemsData({ itemsIds }).then(({ items, itemCollect }) => {
setItemsCollect(itemCollect); // <--> switched rows
setItemsData(items); // <--> switched rows
})
}, [itemsIds]);
...
console.log('itemsData', itemsData) // the expected array
console.log('itemCollect', itemCollect) // the expected object
useEffect 之后的状态:itemCollect = { someValue: ...} , itemsData = [{value:...},...]
最佳答案
有一种称为批处理的性能优化,can change between React versions .应用此优化后,多个 setState
调用将在下一次渲染之前一起批处理(顺序无关紧要)。
如果未应用(例如,在您的情况下的 Promise 内部,请参阅 Does React batch state update functions when using hooks? ),则每次状态更新都将触发新的渲染(并且顺序很重要)。
=> console.log('itemCollect', itemCollect)
可能会在每个渲染中记录不同的数据。
如果您需要强制更新单个状态,则从 useReducer 调用单个调度可能是最好的选择。
关于javascript - 使用 useState Hook 时 - 更改 setState 函数调用顺序是否重要?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57027697/