React访问对象属性报TypeError仅出现在return函数外的问题求助

• 组件首次渲染时，course的初始值为undefined（你调用useState时没有传入初始值），此时顶层的console.log(course.number)会直接执行，访问undefined的属性自然会抛出TypeError。
• 而return内部的代码不会报错，是因为你提前做了isLoading判断：首次渲染时isLoading为true，直接返回了加载提示，不会执行后续return中的属性访问逻辑；等接口请求完成、course被赋值、isLoading改为false后，才会执行后续return代码，此时course已经有值，自然不会报错。
• 直接打印course无报错是因为打印undefined本身不会触发异常，你在控制台看到的打印结果其实是接口请求完成、组件重渲后输出的有效对象，容易造成首次打印也正常的误解。

另外你后端代码存在文件名引入不一致的隐患：控制器文件名为course.js，但路由文件中导入的是../controllers/courses.js（多了后缀s），路由文件名为course.js，但server.js中导入的是./routes/courses.js，这会导致接口请求404，建议先修正路径。

• 给course设置初始空对象：const [course, setCourse] = useState({})，此时访问不存在的属性只会返回undefined，不会抛出类型错误。
• 给顶层的属性访问加上可选链判断：console.log(course?.number)。
• 把需要访问course属性的逻辑放到isLoading判断之后，避免无值时执行。
• 修正useEffect的依赖数组，加入url和courseId，避免参数更新时不会重新请求数据：

useEffect(() => {
  axios.get(url).then( (selectedCourse) => {
      setCourse(selectedCourse.data);
      setLoading(false);
  } )
}, [url, courseId])

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