React中使用fetch()获取数据无明确原因报错，疑与Babel或Atom编辑器JavaScript语言包相关

先别急，我看了你的代码，核心问题其实和Babel或者Atom的语言包关系不大，主要是两个语法和React规范的小问题，咱们一步步来：

1. setState的箭头函数写法错误 #

你在componentDidMount里的setState用了箭头函数，但返回对象的时候没加括号，导致JavaScript把{ monsters: data }当成了函数体而不是返回的对象——这就意味着你的state根本没被更新，后续map数组自然会出问题。

错误写法：

.then(data => this.setState( ()=>{ monsters: data } ) );

修正方式二选一：

• 要么给对象加括号（让箭头函数直接返回对象）：

  .then(data => this.setState(() => ({ monsters: data })));
  

• 更简单的，直接传对象（不需要箭头函数，因为这里不需要依赖之前的state）：

  .then(data => this.setState({ monsters: data }));
  

2. React列表渲染必须加key属性 #

你用map渲染<li>的时候没有加唯一的key属性，这会触发React的警告，虽然不会直接报错，但不符合React的规范，也可能导致后续渲染异常。建议用每个user的id作为key：

修正后的map代码：

<ul>{this.state.monsters.map((monster)=>{
  return <li key={monster.id}>{monster.name}</li>;
})}</ul>

3. 额外优化：不要直接渲染数组到h1标签 #

你写的<h1>{this.state.monsters}</h1>会直接把数组转换成字符串显示（比如[object Object],[object Object]...），这不是你想要的效果，要么改成显示怪物数量，要么直接删掉这个h1：

<h1>Monster List ({this.state.monsters.length})</h1>

修正后的完整代码 #

import './App.css'
import React, {Component} from 'react'

class App extends Component {
  constructor(){
    super()
    this.state= { monsters: [] };
  }

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => this.setState({ monsters: data }));
  }

  render(){
    return <div className='App'>
      <h1>Monster List ({this.state.monsters.length})</h1>
      <ul>{this.state.monsters.map((monster)=>{
        return <li key={monster.id}>{monster.name}</li>;
      })}</ul></div>;
  }
}

export default App;

关于你怀疑的Babel/Atom问题 #

如果修正后还是报错，可以排查这两点：

• 检查你的React项目是否是用官方的create-react-app创建的，它自带了正确配置的Babel，不需要额外配置；
• Atom的JavaScript语言包一般只是语法高亮，不会影响代码的实际运行，除非你不小心安装了会修改代码的插件，可以暂时禁用所有第三方插件试试。

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