React调用时间API后报Cannot read property 'substr' of undefined求助

• 首次渲染时数据未返回：你在App组件中给time的初始值设为了空数组[]，而接口请求是在组件挂载后（useEffect的回调）才异步执行的，所以第一次渲染Clock组件时，time还没有拿到接口返回的对象，此时time.datetime为undefined，调用substr方法自然就会抛出类型错误。
• 额外语法问题：Clock组件的JSX结构多了一个多余的</div>闭合标签，运行时也会触发语法报错。

方案1：调整初始值+上层条件渲染 #

修改App组件代码，先给time设置合理的初始值，数据加载完成前渲染加载状态，避免把空值传给Clock组件：

import { useState, useEffect } from 'react';
function App() {
  // 初始值设为null，更符合后续要存储对象的语义
  const [time, setTime] = useState(null);

  const getTime = () =>
    fetch("http://worldtimeapi.org/api/ip")
      .then((res) => res.json())
      .then((data) => setTime(data));

  useEffect(getTime, []);

  // 数据加载完成前渲染加载提示
  return time ? <Clock time={time} /> : <p>时间加载中...</p>
}

方案2：Clock组件内层做兼容处理 #

也可以直接在Clock组件中对值做非空判断，同时修复多余的div标签问题：

export default function Clock({ time }) {
  // 用可选链避免调用undefined的方法，兜底可以设为空字符串或者默认提示
  const extractTime = time?.datetime?.substr(12, 4) || '';

  return (
    <div className="time-container">
      <p className="time">{extractTime}</p>
    </div>
  );
}

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