Reactjs useState数组和异步作用域查找

考虑依赖于两个异步调用的组件的状态。一个是初始呼叫，另一个是重复呼叫。 两者都可以更改由

useState

控制的数组。通过将旧数组扩展为文字来追加数组

问题是，当两个调用都解决时，它们设置了相同的状态，但是使用旧数组的排列是从调用

useffect

时开始的范围查找。因此，其中一个调用总是“覆盖”另一个调用

下面是一些简化的代码：

const Component = () => {
  const location = useLocation()

  const [numbers, setNumbers] = useState([1,2,3])

  // say this returns [4,5,6]
  useEffect(()=>{
    fetchOnce().then(newNumbers => setNumbers([...numbers, newNumbers]))
  }, [])

  // say this returns [7,8,9]
  useEffect(()=>{
    fetchMultiple().then(newNumbers => setNumbers([...numbers, newNumbers]))
  }, [location])
}

最终结果是[1,2,3,4,5,6]或[1,2,3,7,8,9]

如何更改它以正确设置状态？

---

我应该是[1,2,3,4,5,6,7,8,9]或[1,2,3,7,8,9,4,5,6]。

使用

集合号的回调形式代替：

const Component = () => {
  const location = useLocation()

  const [numbers, setNumbers] = useState([1,2,3])

  // say this returns [2,3,4]
  useEffect(()=>{
    fetchOnce().then(newNumbers => setNumbers(numbers =>[...numbers, ...newNumbers]));
  }, [])

  // say this returns [5,6,7]
  useEffect(()=>{
    fetchMultiple().then(newNumbers => setNumbers(numbers => [...numbers, ...newNumbers]))
  }, [location])
}


const{useState，useffect}=React；
const fetchOnce=（）=>Promise.resolve（[2,3,4]）；
const fetchMultiple=（）=>Promise.resolve（[5,6,7]）；
console.error=（）=>void 0；//抑制关键点警告，不确定OP想要什么关键点
常量组件=（）=>{
常量[numbers，setNumbers]=useState（[1,2,3]）
useffect（（）=>{
fetchOnce（）。然后（newNumbers=>setNumbers（numbers=>[…numbers，…newNumbers]）；
}, [])
useffect（（）=>{
fetchMultiple（）。然后（newNumbers=>setNumbers（numbers=>[…numbers，…newNumbers]））
}，[地点]）
返回(
{numbers.map（number=>{number}）}
);
}
render（，document.querySelector（'.react'）
改用
集合编号的回调形式：

const Component = () => {
  const location = useLocation()

  const [numbers, setNumbers] = useState([1,2,3])

  // say this returns [2,3,4]
  useEffect(()=>{
    fetchOnce().then(newNumbers => setNumbers(numbers =>[...numbers, ...newNumbers]));
  }, [])

  // say this returns [5,6,7]
  useEffect(()=>{
    fetchMultiple().then(newNumbers => setNumbers(numbers => [...numbers, ...newNumbers]))
  }, [location])
}


const{useState，useffect}=React；
const fetchOnce=（）=>Promise.resolve（[2,3,4]）；
const fetchMultiple=（）=>Promise.resolve（[5,6,7]）；
console.error=（）=>void 0；//抑制关键点警告，不确定OP想要什么关键点
常量组件=（）=>{
常量[numbers，setNumbers]=useState（[1,2,3]）
useffect（（）=>{
fetchOnce（）。然后（newNumbers=>setNumbers（numbers=>[…numbers，…newNumbers]）；
}, [])
useffect（（）=>{
fetchMultiple（）。然后（newNumbers=>setNumbers（numbers=>[…numbers，…newNumbers]））
}，[地点]）
返回(
{numbers.map（number=>{number}）}
);
}
render（，document.querySelector（'.react'）

最终结果不应该是
[1,2,3,2,3,4,5,6,7]
还是
[1,2,3,5,6,7,2,3,4]
？你没有8个或9个anywhere@CertainPerformance你完全正确，我会改变它。最终结果不是应该是
[1,2,3,2,3,4,5,6,7]
还是
[1,2,3,5,6,7,2,3,4]
？你没有8个或9个anywhere@CertainPerformance你完全正确，我会改变它。