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

使用后的状态：效果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

使用后的状态：效果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调用单个调度可能是最好的选择。

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

1 个答案: