React中useState变量API调用后无法保留赋值的问题排查

• API请求未用useEffect包裹：如果直接在组件函数体内调用API，组件每次渲染都会重新执行请求逻辑。当API返回数据后调用setFormData更新状态，状态变化又触发组件重新渲染，再次发起请求，形成循环，导致状态在初始值和API返回值之间交替切换。
• useEffect依赖数组配置错误：若依赖数组中包含formData或其他会频繁变化的变量，setFormData后会再次触发useEffect执行API请求，进而引发循环渲染。
• 表单组件状态更新逻辑有误：子表单的onChange事件处理中，若错误地将formData重置为初始值，也可能导致状态反复回滚。

• 用useEffect包裹API请求并配置正确依赖：
  将获取数据的逻辑放在useEffect中，仅在组件挂载或特定依赖变化时执行请求。示例：

  const [formData, setFormData] = useState({ title: "", content: "" }); // 初始状态
  const refId = props.refId; // 要编辑的引用ID
  
  useEffect(() => {
    const fetchReference = async () => {
      const res = await fetch(`/api/references/${refId}`);
      const data = await res.json();
      setFormData(data);
    };
    fetchReference();
  }, [refId]); // 仅当refId变化时重新请求，空数组则仅挂载时执行一次
  

• 修正useEffect依赖数组：确保依赖数组只包含触发请求的必要变量（如引用ID），不要加入formData或临时变量，避免不必要的循环触发。
• 修复表单onChange逻辑：确保输入变更时基于当前状态进行局部更新，而非重置整个状态。示例：

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };
  

• 优化组件渲染（可选）：若子表单组件无需频繁更新，用React.memo包裹，减少不必要的渲染触发。

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