React中存储fetch获取的JSON并作为props传递给组件的问题

你的写法完全不符合React的渲染逻辑，错在两个地方：

• 普通变量的修改不会触发组件重渲染：组件首次执行渲染的时候，dataGlobal还是undefined，这时候已经把undefined传给Title组件了，组件直接读undefined上的name字段直接抛错。等你后面异步请求拿到数据给dataGlobal赋值的时候，React根本不知道这个变量变了，不会重新渲染组件传最新值。
• 你把异步请求直接写在组件函数的顶层作用域，只要组件重渲染就会重复发请求，属于典型的错误写法。

用React内置的useState存储接口返回数据，用useEffect控制请求只在组件首次挂载时执行，数据加载完成前增加加载判断，避免子组件拿到空值报错。
修正后的完整代码如下：

import logo from './logo.svg';
import './App.css';
import React, {useEffect, useState} from 'react';
import Title from "./components/Title"
import Summary from "./components/Summary"
import Skills from './components/Skills';
import Experience from './components/Experience';
import Sideprojects from './components/Sideprojects';
import Education from './components/Education';
import Interests from './components/Interests';
import Courses from './components/Courses';
import Picture from './components/Picture';

// 原有静态JSON数据保留即可
var cvdata = { /* 你原来写的静态JSON内容 */ }

function App() {
  // 用state存接口拉取的简历数据，初始值设为null
  const [remoteCvData, setRemoteCvData] = useState(null);

  useEffect(() => {
    // 拉取接口数据的逻辑放在effect里
    const getData = async () => {
      const response = await fetch("http://localhost:5000/api");
      const data = await response.json();
      // 数据存入state，这一步会自动触发组件重渲染，把最新值传给子组件
      setRemoteCvData(data);
    };
    getData();
  }, []); // 空依赖数组保证请求仅在组件首次挂载时执行1次

  // 接口数据没返回前，渲染加载提示，不要直接渲染依赖数据的子组件
  if (!remoteCvData) {
    return <div className="App">数据加载中...</div>
  }

  return(
    <div className="App">
      <div className='Upleft'>
        <Title props={remoteCvData}/>
        <Summary props={cvdata}/>
        <Experience props={cvdata}/>
        <Education props={cvdata}/>
      </div>

      <div className='Right'>
        <Picture props={cvdata}/>
        <Skills props={cvdata}/>
        <Interests props={cvdata}/>
        <Courses props={cvdata}/>
        <Sideprojects props={cvdata}/>
      </div>
    </div>
  )
}

export default App; 

• 不要用普通全局变量/函数内普通变量存储需要驱动视图更新的数据，React不会监听这类变量的变化，只有调用setState触发的更新才会重跑渲染逻辑，把最新值传递给子组件。
• 你原代码里导入的ReactDOM在App组件中没有被使用，可以直接删掉，避免无效导入。
• 如果后续需要把其他组件的静态数据也替换成接口返回值，直接把对应位置传入的cvdata换成remoteCvData即可。

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