React中this.state.sistemas.map不是函数报错求助

嘿，这个错误我太熟啦！本质就是你想在非数组的变量上调用数组专属的map方法。你虽然在构造函数里把this.state.sistemas初始化成了空数组，但后续肯定是哪里把它改成了非数组类型，大概率是axios请求返回的数据结构和你预期的不一样。

下面给你一步步排查和解决的方法：

1. 先确认axios请求返回的数据结构 #

你应该是在某个地方用axios发起请求后更新了状态，比如类似这样的代码：

axios.get('你的接口地址')
  .then(res => {
    this.setState({ sistemas: res.data })
  })
  .catch(err => console.error(err))

问题很可能出在res.data上：如果接口返回的不是直接的数组，而是一个包裹数组的对象（比如{ code: 200, data: [/* 你的数据 */] }），那this.state.sistemas就会变成一个对象，自然不能调用map。

解决办法：先在then里打印res.data看看结构，比如：

.then(res => {
  console.log('接口返回数据：', res.data)
  // 假设接口返回的数组在res.data.data里，就改成下面这样
  this.setState({ sistemas: res.data.data || [] })
})

如果接口确实返回单个对象，那你需要把它放进数组里：

this.setState({ sistemas: [res.data] })

2. 在render里添加防护逻辑 #

就算请求还在加载、或者数据结构意外变化，也能避免报错。你可以先判断sistemas是不是数组，再调用map：

render() {
  const { sistemas } = this.state
  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            {/* 表头内容 */}
          </tr>
        </thead>
        <tbody>
          {/* 先判断是否为数组，再执行map */}
          {Array.isArray(sistemas) ? sistemas.map((item, index) => (
            <tr key={index}>
              {/* 渲染你的表格内容，比如{item.nome}之类的 */}
            </tr>
          )) : (
            <tr>
              <td colspan="*">数据加载中或格式错误</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  )
}

也可以用ES6的可选链操作符简化（需要你的项目支持，或者配置Babel转译）：

{sistemas?.map((item, index) => (
  <tr key={index}>
    {/* 表格内容 */}
  </tr>
)) ?? <tr><td>无数据</td></tr>}

3. 检查其他可能修改状态的地方 #

如果你的代码里还有其他地方调用this.setState修改sistemas，也要确认那里赋值的是数组，比如有没有不小心把单个对象、字符串或者null赋值给它了。

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