Javascript 使用useState钩子时，更改setState函数调用顺序是否很重要？

我有一个带有两个状态变量（

itemsData

&

itemsCollections

）的React功能组件。变量在

useffect

方法中更新。但是在

useffect

发生之后，其中一个状态变量是

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

useffect之后的状态：

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

constmycomponent=（{itemsIds}）=>{
...
useffect（（）=>{
fetchItemsData（{itemsIds}）。然后（{items，itemCollect}）=>{
setItemsCollect（itemCollect）；//交换行
setItemsData（items）；//交换行
})
}，[SIDS]；
...
console.log（'itemsData'，itemsData）//所需的数组
console.log（'itemCollect'，itemCollect）//所需的对象

---

useffect之后的状态：

itemCollect={someValue:…}，itemsData=[{value:…}，…]

有一个称为批处理的性能优化。应用此优化时，多个

setState

调用将在下一次渲染之前批处理（顺序无关紧要）

如果未应用（例如，在您的案例中，在承诺内，请参见），则每个状态更新将触发新的渲染（并且顺序很重要）

=>

console.log（'itemCollect'，itemCollect）

可以在每个渲染中记录不同的数据

---

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

尝试在useEffect内部但在fetchItemsData外部登录到console。据我所知，顺序应该与可能的重复感谢无关，您的回答解释了部分行为，但缺少的部分是更改行的原因更改了结果。因此，我继续研究调用之间的差异，似乎在第一种情况下，render触发了两次，但当我切换行时，render只触发了一次。这意味着在promises中未实现批处理的假设是错误的。我猜触发一次或两次的原因是si变量的大小。“items”是一个包含许多元素的大数组，“itemCollect”是一个带有一个键的小对象。如果您要更新答案以更精确地回答主要问题（意思是-不同的调用顺序可以更改触发渲染的数量）我很乐意接受它——我无法验证您如何检测渲染数量的方法，我也没有其他来源相信渲染数量可以取决于单个堆栈帧内函数调用的顺序。我可能会检查React源代码，但在此之前，我将无法用任何经验证的事实更新我的答案。请放心不过，用你的发现发布你自己的答案。