React中如何将API返回的多个独立对象合并存入state数组

当前代码每次拿到接口返回的单个独立对象后，直接调用setPlanets(worldData)会完全覆盖原有state，而非把新对象追加到数组中；加上接口返回的多个对象本身没有被外层数组包裹，直接赋值就会出现state始终是单个对象、无法收集所有返回值的问题。

使用React状态的函数式更新写法，每次拿到新返回的对象时，将其拼接到已有数组的末尾，避免闭包导致的旧状态取值问题：

const [planets, setPlanets] = useState([]);

useEffect(() => {
 (async () => {
  const users = await axios(world);
  const worldData = users.data;
  // 取到上一轮的状态值，拼接新对象后更新
  setPlanets(prev => [...prev, worldData]);
 })();
}, [nextTeam, world]);

• 如果接口存在偶尔返回数组、偶尔返回单对象的情况，可以加一层格式判断，避免出现数组嵌套：

setPlanets(prev => {
  const formattedData = Array.isArray(worldData) ? worldData : [worldData];
  return [...prev, ...formattedData];
})

• 如果切换查询条件时不需要保留之前拉取到的对象，可以在发起请求前先执行setPlanets([])清空状态即可。
• 更新完成后直接将planets数组传入Redux即可，不需要额外做格式转换。

• 接口返回数据示例：
  
• 修复前planets状态打印结果（仅存储单个对象）：
  

内容的提问来源于stack exchange，提问作者Anta