React Hooks遍历JSON插入数组防重复及执行无输出问题求解

你的代码存在3个核心问题 #

• fetch是异步IO操作，你写在fetch后的setDatelist、console.log逻辑不会等接口返回就会提前执行，首次执行时dates还是初始空值，所以拿不到数据
• React的状态更新是批量异步的，刚调用完setDates立刻读dates、刚调用完setDatelist立刻读datelist，拿到的都是本次渲染周期的旧值，不会是刚更新的新值
• 你用了[...datelist, xxx]的写法是往旧数组追加内容，没有做替换逻辑，所以每次调用函数都会叠加旧数据，导致数组越来越大

最优实现方案 #

优先删除冗余的datelist状态，直接从接口返回的dates派生计算即可，不需要额外维护两份状态，从根源避免不同步问题：

import { useState } from 'react';

const YourComponent = () => {
  // 只保留接口返回的原始数据状态即可
  const [dates, setDates] = useState([]);
  // datelist直接派生计算，dates变化时会自动更新
  const datelist = dates.map(date => date.start.dateTime);

  const get = async () => {
    try {
      const res = await fetch('/test');
      const data = await res.json();
      setDates(data);
      // 要打印最新值直接处理接口返回的data即可，不要读当前状态
      console.log(data.map(item => item.start.dateTime));
    } catch (err) {
      console.error('接口请求失败', err);
    }
  }

  // 其余组件逻辑...
}

如果确实需要单独维护datelist状态的写法 #

如果有特殊业务场景必须单独存datelist，直接在接口返回后一次性计算更新即可，不需要中间转存dates状态：

import { useState } from 'react';

const YourComponent = () => {
  const [datelist, setDatelist] = useState([]);

  const get = async () => {
    try {
      const res = await fetch('/test');
      const data = await res.json();
      const newDatelist = data.map(item => item.start.dateTime);
      // 直接替换旧数组，不要用追加逻辑
      setDatelist(newDatelist);
      console.log(newDatelist);
    } catch (err) {
      console.error('接口请求失败', err);
    }
  }

  // 其余组件逻辑...
}

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