开发者问题收集

React TypeError this.state.data.map 不是一个函数

2020-05-10
204
javascript json reactjs typeerror

我正在尝试使用 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
  }
}

当尝试访问文件的此属性时，它给了我一个 typeError 无法读取未定义的属性“temp” ，即使通过 ma​​in 属性映射并尝试像这样访问它 ==> 

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

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

请帮帮我🥺

3个回答

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

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

{data.main && data.main.temp}
thedude
2020-05-10

下面的代码对我有用，只需要将 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;
antlis
2020-05-10

是的，最后我终于搞清楚了，这是 React 中常见的挂载问题。 @thedude 说得对……谢谢！最终答案是 

<div>
      {data.main && data.main.temp?data.main.temp:''}
    </div>
KR Tirtho
2020-05-10