使用 useState 挂钩时 - 更改 setState 函数调用顺序是否重要？

Question

我有一个带有两个状态变量（itemsData 和itemsCollections）的 React 功能组件。变量在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:...},...]

Answer 1

有一个称为批处理的性能优化，can change between React versions。应用此优化时，多个setState 调用将在下一次渲染之前一起批处理（顺序无关紧要）。

如果未应用（例如，在您的情况下的 Promise 中，请参阅 Does React batch state update functions when using hooks?），则每次状态更新都会触发新的渲染（并且顺序很重要）。

=> console.log('itemCollect', itemCollect) 可能会在每次渲染中记录不同的数据。

如果您需要强制更新单个状态，那么从 useReducer 调用单个调度可能是最佳选择。