React中API调用后useState的Set函数丢失状态值问题

问题可能原因 #

虽然你在setData中用了函数式更新（依赖previousData），但实际运行中a/b/c值丢失，大概率是父组件的handleChange函数不稳定导致的：父组件每次重新渲染时都会创建新的handleChange实例，子组件中的callSecond函数捕获的是第一个API调用时的旧版handleChange——尽管函数式更新理论上能规避闭包问题，但实际场景中仍可能出现状态合并异常。另外也需要排查父组件是否有其他未显示的代码直接覆盖了data状态（比如直接setData({isLoading: false})而没有展开原有状态）。

解决方案 #

1. 稳定父组件的handleChange函数

用useCallback包裹handleChange，避免每次渲染重新创建函数，确保子组件拿到的始终是最新版本：

import { useState, useCallback } from 'react';

// 父组件状态定义不变
const [data, setData] = useState({
  isReadOnly: true,
  isLoading: true,
  a: null, 
  b: null,
  c: null, 
  d: null, 
  e: null,
});

// 用useCallback稳定handleChange
const handleChange = useCallback((item) => {
  let newData = {};
  if (Array.isArray(item)) {
    // 把var改成let，避免函数级作用域导致的潜在问题
    for (let i = 0; i < item.length; i++) {
      newData = {
        ...newData,
        [item[i].key]: item[i].value,
      };
    }
  }
  // 函数式更新逻辑保持不变
  setData(previousData => ({
    ...previousData,
    ...newData
  }));
}, []); // 依赖项为空，setData是React内置的稳定函数，无需加入依赖

2. 子组件用React.memo优化

包裹子组件，避免因父组件重新渲染导致的不必要更新，确保props.handleChange始终是最新的：

import { memo } from 'react';

// 定义子组件时用memo包裹
const SearchComponent = memo((props) => {
  // 子组件原有逻辑不变
  const handleSearchClick = () => {
    // ...原有代码
  };

  const callSecond = () => {
    // ...原有代码
  };

  return <button onClick={handleSearchClick}>搜索</button>;
});

export default SearchComponent;

3. 可选：确保状态更新完成后再调用第二个API

如果想明确等待第一个状态更新完成后再发起第二个API调用，可以用Promise包裹状态更新：

const handleSearchClick = () => {
  myService.getInfo(Input)
    .then((response) => {
      const updatedData = [
        { key: "a", value: "Value For A" },
        { key: "b", value: "Value For b" },
        { key: "c", value: "Value For C" }
      ];
      // 用Promise等待状态更新完成
      return new Promise(resolve => {
        props.handleChange(updatedData);
        resolve();
      });
    })
    .then(() => {
      callSecond();
    });
};

额外检查点 #

确认父组件中所有修改data状态的操作都使用函数式更新或完整展开原有状态，避免直接覆盖：

• 错误示例：setData({isLoading: false})（会丢失a/b/c/d/e等所有字段）
• 正确示例：setData(prev => ({...prev, isLoading: false}))

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