React组件接收API数据作为prop时状态渲染异常的原因与解决方法

1. 为什么会出现这种情况？ #

核心原因是React中useState的初始值仅在组件首次挂载时生效一次，后续父组件props更新不会自动同步子组件的state：

• 首次渲染InfoComp时，App组件的API请求还未完成，传递的info是初始值[]，因此infoValue被初始化为[]。
• 当API请求完成后，App组件更新info状态并传递给InfoComp，此时InfoComp会重新渲染，但useState(info)的初始化逻辑不会再次执行，infoValue仍保持最初的初始值（若你看到undefined，大概率是API返回数据结构与初始值类型不匹配导致的显示差异）。
• 而直接渲染props.info能正常显示，是因为每次重新渲染都会读取最新的props值。

2. 如何正确将API获取的数据作为props传递给其他组件？ #

分两种场景处理：

场景一：子组件不需要修改该数据（仅展示） #

完全不需要将props存入子组件state，直接使用props即可，这是最简洁的方式：

// InfoComp组件修改后
import React from 'react';

const InfoComp = ({ info }) => {
  return (
    <div>
      <p>数据内容: {JSON.stringify(info)}</p>
    </div>
  );
};

export default InfoComp;

场景二：子组件需要维护该数据的本地状态（比如要修改） #

使用useEffect监听props.info的变化，当props更新时同步更新子组件state：

// InfoComp组件修改后
import React, { useState, useEffect } from 'react';

const InfoComp = ({ info }) => {
  const [infoValue, setInfoValue] = useState(info);

  // 监听props变化，同步更新state
  useEffect(() => {
    setInfoValue(info);
  }, [info]); // 依赖项填info，当info变化时执行

  return (
    <div>
      <p>本地状态数据: {JSON.stringify(infoValue)}</p>
    </div>
  );
};

export default InfoComp;

额外优化建议：App组件中初始state设为[]，如果API返回的是对象类型，建议将初始值改为null，这样能更清晰区分“未加载”和“加载完成”的状态，比如：

// App组件修改初始state
const [info, setInfo] = useState(null);

// 渲染时增加加载状态提示
return (
  <div className="App">
    {info ? <InfoComp info={info} /> : <p>加载中...</p>}
  </div>
);

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