React中两次API调用合并数组的问题及代码求助

你的问题出在两个异步请求并发执行时，各自独立调用setResults，因请求返回顺序不确定，要么会导致状态更新基于旧的初始数组，出现数据覆盖丢失，要么若组件意外重渲染，会重复添加数据。

改成等待两个请求全部完成后，一次性合并数据再更新状态，就能解决这两个问题：

const [results, setResults] = useState([]);

useEffect(() => {
  // 并行发起两个请求，等待全部完成
  const fetchAllData = async () => {
    try {
      // 同时发起两个请求，无需等待第一个完成再发第二个
      const [storiesRes, contributionsRes] = await Promise.all([
        axios.get(`/api/stories/admin`),
        axios.get(`/api/contributions/admin`)
      ]);
      // 合并两个请求的数据，一次性设置状态
      setResults([...storiesRes.data, ...contributionsRes.data]);
    } catch (err) {
      // 可添加错误处理，比如提示请求失败
      console.error('数据请求失败:', err);
    }
  };

  fetchAllData();
}, []); // 空依赖保证仅组件挂载时执行一次

// Bootstrap加载部分保持不变
useEffect(() => {
  async function loadBootstrap() {
    const bootstrap = await import(
      "../../../node_modules/bootstrap/dist/js/bootstrap"
    );

    var tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  }

  loadBootstrap();
}, []);

return (<>{JSON.stringify(results)}</>);

关键改动说明 #

• 使用Promise.all并行处理两个API请求，确保拿到所有数据后再合并，避免多次分阶段更新状态导致的冲突。
• 一次性调用setResults设置合并后的数组，不会出现基于旧状态更新的问题。
• 空依赖的useEffect确保仅在组件挂载时执行一次请求，满足每个API只调用一次的需求。
• 页面刷新时组件重新挂载，results回到初始空数组，不会持续变长。

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