React TypeError this.state.data.map 不是函数答案

【问题标题】：React TypeError this.state.data.map is not a functionReact TypeError this.state.data.map 不是函数
【发布时间】：2020-08-25 18:03:14
【问题描述】：

我正在尝试使用 react 从头开始构建 OpenWeatherMap 应用程序，但是在访问从本地测试 API 获取的数据时，如果我尝试访问 json 数据中的嵌套对象，则会出现错误...请帮助我！

我的代码

const App = ()=> {
  const [data, setData] = useState([])

  useEffect(()=>{
   fetch('./data.json')
   .then(res=>res.json())
   .then(data=> setData(data))
  }, [])  


    return (
    <div>
      {data.main.temp}
    </div>
    )

}
}

我的 JSON 文件的结构

{"weather": [
    {
      "id": 300,
      "main": "Drizzle",
      "description": "light intensity drizzle",
      "icon": "09d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 280.32,
    "pressure": 1012,
    "humidity": 81,
    "temp_min": 279.15,
    "temp_max": 281.15
  }
}

当尝试访问文件的这个属性时，它给我一个类型错误 Cannot read property 'temp' of undefined 即使通过 main 属性映射然后尝试像这样访问它==>

<div>
      {data.main.map(d=>d.temp)}
</div>

它给了我一个错误无法读取未定义的属性“地图”

请帮帮我？？？？

【问题讨论】：

标签： javascript json reactjs typeerror

【解决方案1】：

下面的代码对我有用，只有我必须将 data.json 移动到公共文件夹。我在本地对其进行了测试，通过 create-react-app 创建了新的测试项目。

import React, {useEffect, useState} from "react";

const App = ()=> {
  const [data, setData] = useState([])

  useEffect(()=>{
   fetch('/data.json')
   .then(res=>res.json())
   .then(data=> setData(data))
  }, [])


  return (
    <div>
      {JSON.stringify(data.main)}
      <h1>{data.main && data.main.temp}</h1>
    </div>
  )

}

export default App;

【讨论】：

【解决方案2】：

是的，终于发现这是 React 中常见的挂载问题。 @thedude 是对的..谢谢！最终答案是

    <div>
      {data.main && data.main.temp?data.main.temp:''}
    </div>

【讨论】：

如果@dedude 的答案是正确的，去那里标记他的答案是正确的。不要简单地添加另一个类似于他的答案。

【解决方案3】：

setState 是异步的，数据只会在下一个渲染周期可用。

您应该在渲染之前测试数据是否可用，例如

{data.main && data.main.temp}

【讨论】：

看起来这也会失败，因为data 中的main 不是数组。这是一个对象
@thedude 你是对的，但我在基于类的组件中尝试过，我的意思是 componentDidMount 但结果仍然相同。所以请告诉我访问 main 的 temp 属性的方法。
只有在它被提取后才能访问它，这需要一些时间。您必须在代码中处理这种情况