React组件无法渲染state数据：调用map时提示undefined错误

这个报错的核心原因是异步请求的时机问题，加上你没有给vessels设置初始默认值：

1. 组件第一次渲染时，componentDidMount里的fetch请求还在后台异步执行，此时this.state.vessels是undefined（因为你初始state是空对象{}），直接调用undefined.map()自然会抛出Cannot read property 'map' of undefined的错误。
2. 而test能正常显示是因为：第一次渲染时test也是undefined，但你只是在<p>里直接输出它，React会把undefined转换成空字符串显示，不会触发报错；等请求完成后state更新，test被赋值为'xyz'，组件重新渲染就显示出值了。

解决办法有两种，任选其一即可： #

方法一：初始化state时给vessels设置空数组默认值

修改你的constructor部分，把vessels初始化为空数组，这样第一次渲染时map就能在空数组上正常执行（不会报错，只是不渲染任何元素）：

constructor(props) {
  super(props)
  this.state = { 
    vessels: [] // 初始化空数组，避免第一次渲染时vessels为undefined
  }
}

方法二：渲染时添加条件判断/可选链

在调用map之前，先判断vessels是否存在，或者用可选链操作符?.来避免报错：

{ this.state.vessels?.map(d => {
  console.log(d);
  return <div key={d.vesselimo}>{d.vesselname}</div> // 记得给列表项加唯一key属性哦
}) }

（额外提醒：React列表渲染时最好给每个元素加唯一的key属性，这里用d.vesselimo就很合适，能提升渲染性能）

这样修改后，不管是第一次渲染（vessels为空或undefined）还是请求完成后，组件都能正常运行啦。

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