反应类型错误 this.state.data.map 不是 function

Question

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

我的代码

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
  }
}

当尝试访问文件的这个属性时，它给了我一个 typeError无法读取未定义的属性“temp”，即使 map 通过主属性然后尝试像这样访问它==>

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

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

请帮我

Answer 1

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

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

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

Answer 2

下面的代码对我有用，只有我必须将 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;

Answer 3

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

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