React函数组件中Fetch获取数据后无法在页面显示问题求助

1. 状态更新未生成新引用（最常见） #

React 依赖引用变化触发重渲染，若直接修改原对象/数组后返回，React 会判定状态未变更，不会更新页面。

错误示例：

// 直接修改原状态对象，引用未改变
fetch('/api/restaurant')
  .then(res => res.json())
  .then(data => {
    restaurant.name = data.name;
    setRestaurant(restaurant);
  })

正确做法：生成新的对象/数组引用：

fetch('/api/restaurant')
  .then(res => res.json())
  .then(data => {
    // 用扩展运算符创建新对象
    setRestaurant(prev => ({ ...prev, ...data }));
    // 若是数组则用：setRestaurant(prev => [...prev, ...data]);
  })

2. 初始状态与渲染逻辑不匹配 #

若初始状态设为 null/undefined，但渲染时直接访问嵌套属性（如 restaurant.address.street），首次渲染会抛出错误，导致后续状态更新后页面仍无法正常渲染。

解决办法：

• 初始状态设为与返回数据结构一致的空值，比如对象用 {}，数组用 []
• 渲染时添加空值判断：

// 可选链+空值合并处理
<div>{restaurant?.name ?? '加载中...'}</div>

// 或条件渲染
{restaurant.name && <div>{restaurant.name}</div>}

3. useEffect 依赖项配置错误 #

如果请求依赖某个变量（如 restaurantId），但 useEffect 的依赖数组未包含该变量，变量变化时不会重新发起请求，状态会保持旧数据。

示例：

const [restaurantId, setRestaurantId] = useState(1);
const [restaurant, setRestaurant] = useState({});

useEffect(() => {
  fetch(`/api/restaurant/${restaurantId}`)
    .then(res => res.json())
    .then(data => setRestaurant(data));
}, [restaurantId]); // 必须添加依赖项 restaurantId

4. 渲染逻辑中的条件判断错误 #

比如错误使用对象引用判断空状态：

// 错误：对象引用不同，此判断永远为 false
{restaurant === {} && <div>无数据</div>}

正确判断空对象：

// 判断对象是否包含属性
{Object.keys(restaurant).length === 0 && <div>无数据</div>}
// 或结合加载状态渲染
{Object.keys(restaurant).length > 0 ? (
  <div>{restaurant.name}</div>
) : (
  <div>加载中...</div>
)}

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