Question

我正在尝试从头开始构建一个带有响应的OpenWeatherMap应用程序，但是在访问本地Testing API提取的数据时，如果尝试访问json数据中的嵌套对象，则会收到错误消息……请帮助我！ / p>

我的代码

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

当尝试访问文件的此属性时，即使我通过 main 属性进行映射，它也会给我带来无法读取未定义属性'temp'的类型错误，然后尝试这样访问它==>

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

反应TypeError this.state.data.map不是函数

3 个答案: