如何将Fetch API获取的记录存储为对象数组且不覆盖原有数据？

AI 小北

2026-8-16

解决React状态被Fetch数据覆盖的问题

你的问题核心在于setData([result])的写法错误：

若后端返回的result本身就是多条记录组成的数组（比如[{obj1},{obj2}]），[result]会把它包裹成二维数组，导致后续map遍历失效
直接赋值新数组会完全覆盖之前的状态，无法保留历史记录

正确实现方式

场景1：仅一次性加载所有数据

如果loadData只在组件挂载时调用一次，直接将后端返回的数组赋值给状态即可：

let [data, setData] = useState([]);
const navigate = useNavigate();

const loadData = async () => {
  const response = await fetch("http://localhost/k-shop/load.php");
  const result = await response.json();
  // 直接赋值返回的数组，无需额外包裹
  setData(result);
};
useEffect(() => {
  loadData();
}, []);
console.log(data);

场景2：需要多次加载并追加新记录

如果后续会重复调用loadData（比如下拉加载更多），要使用函数式更新合并旧数据与新数据：

let [data, setData] = useState([]);
const navigate = useNavigate();

const loadData = async () => {
  const response = await fetch("http://localhost/k-shop/load.php");
  const result = await response.json();
  // 展开旧数组和新数组，合并成新的数组
  setData(prevData => [...prevData, ...result]);
};
// 组件挂载时加载一次，后续可通过按钮、滚动事件等触发loadData
useEffect(() => {
  loadData();
}, []);
console.log(data);