useState初始化对象时丢失HTTP请求返回的teams数组问题求助

尝试用useState初始化常量，但初始化后，来自HTTP请求的teams数组数据丢失。具体表现为：调用createBlankGroups生成的tempGroups中teams数组正常显示，但用tempGroups初始化columns状态后，columns里对应的items数组变为空。

相关代码 #

生成分组的函数 #

const createBlankGroups =(count)=>{

    const blankGroups ={
        [uuid()]:{
            name: 'Teams',
            items: teams // teams是通过HTTP请求从数据库获取的
        }
    };

    let letter = 'A'

    for(let i =0; i < count;i++){
        blankGroups[uuid()] = {
            name: 'Gruppe ' + letter,
            items: []
        };
        letter = String.fromCharCode(letter.charCodeAt(0)+1 )
    }
    console.log(blankGroups)

    return(blankGroups);
}

状态初始化代码 #

const tempGroups = createBlankGroups(3)

console.log(tempGroups) // 此时控制台显示teams数组仍存在

const[columns,setColumns]= useState(tempGroups);

console.log(columns); // 这里对应的items数组变成空的

原因与解决办法 #

核心原因 #

useState的初始值是在组件首次渲染前计算的，而teams是异步HTTP请求的结果——首次渲染时请求还未完成，teams实际是初始的空数组（或未定义）。浏览器控制台的对象是动态引用，等请求完成teams有值后，控制台里的tempGroups会自动更新显示最新值，但传给useState的是请求未完成时的空数组，导致状态初始化后数据丢失。

正确实现方式 #

• 等待异步数据就绪后再更新状态
  用useEffect监听teams的变化，当teams获取到数据后再生成分组并更新状态：

  const [columns, setColumns] = useState({});
  
  useEffect(() => {
    // 确保teams已有数据时才执行
    if (teams.length > 0) {
      const tempGroups = createBlankGroups(3);
      setColumns(tempGroups);
    }
  }, [teams]); // 依赖teams，数据更新时触发
  

• 在请求回调中直接初始化状态
  如果是在组件内发起HTTP请求，直接在请求成功的回调里生成分组并设置状态，避免依赖未就绪的异步数据：

  const [columns, setColumns] = useState({});
  const [teams, setTeams] = useState([]);
  
  useEffect(() => {
    // 发起HTTP请求获取teams
    fetch('/api/teams')
      .then(res => res.json())
      .then(data => {
        setTeams(data);
        // 数据获取完成后生成分组并更新状态
        const tempGroups = createBlankGroups(3);
        setColumns(tempGroups);
      });
  }, []);
  

• 先初始化空状态，后续按需更新
  若组件不需要一开始就有columns数据，可以先初始化空对象，等teams就绪后再调用setColumns更新，避免初始渲染时依赖异步数据。

内容的提问来源于stack exchange，提问作者Wings of Shadows