React父组件传data给子组件渲染时出现TypeError错误求助

这个错误的核心问题是组件初始渲染时，API数据还未返回，data是空对象，导致访问嵌套属性时触发TypeError：

• 你初始化data为{}，组件第一次渲染时，data.image、data.market_data都是undefined，尝试访问undefined.large或undefined.market_cap.usd就会抛出"Cannot read properties of undefined"错误。
• data.name和data.symbol是顶级属性，访问空对象的不存在属性只会返回undefined，React可以正常渲染undefined（显示为空），所以不会报错。

以下几种方法都能解决这个问题，选适合你的即可：

1. 使用可选链操作符（推荐） #

在访问嵌套属性时添加?.，当中间属性不存在时会自动返回undefined，避免报错：
修改Info.js中的相关代码：

<img
  className="coin-icon"
  src={data.image?.large}
  alt="coin logo"
  width="40px"
  height="40px"
></img>
// ...
<p className="coin-MCAP">{data.market_data?.market_cap?.usd}</p>

2. 条件渲染 #

通过&&判断嵌套属性是否存在，再渲染对应内容：

{data.image && (
  <img
    className="coin-icon"
    src={data.image.large}
    alt="coin logo"
    width="40px"
    height="40px"
  ></img>
)}
// ...
{data.market_data?.market_cap && (
  <p className="coin-MCAP">{data.market_data.market_cap.usd}</p>
)}

3. 设置合理的初始状态 #

把data的初始值设为null，然后在Info组件中先判断data是否存在再渲染：
修改App.js的初始状态：

const [data, setData] = useState(null);

修改Info.js的渲染逻辑：

function Info({ image, mcap, data }) {
  if (!data) return <div>加载中...</div>; // 或者其他加载提示
  return (
    // 原渲染内容
  )
}

4. 添加加载状态变量 #

在App组件中新增加载状态，控制Info组件的渲染时机：

// App.js中新增状态
const [loading, setLoading] = useState(true);

// 修改getData函数
const getData = () => {
  setLoading(true);
  axios({...})
    .then((response) => {
      setData(response.data);
      setLoading(false);
    })
    .catch((err) => {
      console.log(err);
      setLoading(false);
    });
};

// 渲染时判断
return (
  <div>
    <HeaderContainer />
    <Search getData={getData} coin={coin} setCoin={setCoin} />
    {loading ? <div>加载中...</div> : <Info mcap={mcap} data={data} />}
  </div>
);

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