React中通过Axios获取服务端数组数据渲染时变量未定义报错如何解决？

错误1：contacts is not defined 原因与解决 #

你在axios的then回调函数内部用const声明的contacts是块级作用域变量，仅能在回调函数内部访问，组件的render（return）部分完全读取不到这个变量。
同时你直接把axios请求写在组件函数体顶层，会导致组件每次重渲染都重复发送请求，需要把请求放到useEffect钩子中，且拿到数据后存入React state才能在渲染时读取：

1. 先从react中导入useEffect钩子：

import React, { useState, useEffect } from 'react'

2. 把你的axios请求代码替换为带空依赖数组的useEffect包裹，拿到数据后更新你已经声明的persons state：

useEffect(() => {
  axios.get('http://localhost:3001/persons').then(response => {
    const contacts = response.data
    console.log(contacts)
    setPersons(contacts)
  })
}, [])

空依赖数组[]保证这个请求仅在组件首次挂载完成后触发一次。

错误2：Contact is not defined 原因与解决 #

你没有在文件头部导入Contact组件，有两种解决方式：

• 如果你是想用已经导入的Person组件展示数据，直接把渲染代码里的Contact改成Person即可：

<ul>
  {persons.map(contact => 
    <Person key={contact.id} person={contact}  />
  )}
</ul>

• 如果你确实需要用Contact组件，先在文件头部补导入语句，路径替换为你组件的实际存放路径：

import Contact from './components/Contact'

修改完成后即可正常渲染服务端返回的联系人数据。

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