React表单回显旧数据报错：Uncaught TypeError: old is null

核心原因 #

你的问题本质是异步数据加载时机与组件初始化的冲突：

• 自定义useFetch是异步获取数据，组件第一次渲染时old的值还是null，直接用old.title作为useState的初始值，会触发TypeError: old is null，导致组件渲染失败、页面空白。
• 后续useFetch拿到数据后组件重新渲染，此时old有值，console.log(old.title)能输出，但初始渲染的报错已经让页面无法正常显示。

解决方案 #

1. 先初始化空状态，再用useEffect同步异步数据 #

修改useState的初始值为安全的空值，通过useEffect监听old的变化，当数据加载完成后再更新表单状态：

import { useState, useEffect } from 'react';
import useFetch from './your-useFetch-path';

function Update() {
  const { data: old } = useFetch('/api/your-data-path');
  // 初始化为空字符串，避免初始渲染报错
  const [title, setTitle] = useState('');

  // 监听old的变化，数据加载完成后同步到表单
  useEffect(() => {
    if (old) {
      setTitle(old.title);
      // 其他字段同理处理
    }
  }, [old]);

  return (
    <form>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      {/* 其他表单字段 */}
      <button type="submit">更新</button>
    </form>
  );
}

2. 条件渲染确保数据存在后再渲染表单 #

在JSX中添加条件判断，只有当old不为null时才渲染表单，避免初始渲染时访问old.title：

function Update() {
  const { data: old } = useFetch('/api/your-data-path');
  const [title, setTitle] = useState('');

  useEffect(() => {
    if (old) setTitle(old.title);
  }, [old]);

  // 数据未加载时显示加载提示
  if (!old) {
    return <div>加载中...</div>;
  }

  return (
    <form>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <button type="submit">更新</button>
    </form>
  );
}

3. 关于defaultValue的问题说明 #

defaultValue只在组件初始渲染时生效，异步数据加载完成后不会自动更新。如果想用非受控组件，需要结合useEffect手动更新DOM，但更推荐用受控组件（方案1/2的方式），维护性更强：

// 非受控组件的手动更新方式（不推荐，受控组件更易维护）
function Update() {
  const { data: old } = useFetch('/api/your-data-path');
  const titleRef = useRef(null);

  useEffect(() => {
    if (old && titleRef.current) {
      titleRef.current.value = old.title;
    }
  }, [old]);

  if (!old) return <div>加载中...</div>;

  return (
    <form>
      <input type="text" ref={titleRef} />
      <button type="submit">更新</button>
    </form>
  );
}

关键总结 #

• 永远不要在useState初始值中直接访问异步数据的属性，因为初始渲染时数据还未加载完成。
• 用useEffect监听异步数据的变化，在数据就绪后同步表单状态。
• 条件渲染是避免空值报错的有效手段，同时可以提升用户体验（显示加载提示）。

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