我正在使用Weatherbit API进行网络分析。我在App.js文件中使用API响应，然后将其保存到一个状态，然后将该状态传递给另一个组件。但是该组件正在获取该状态的初始值（空对象），而不是API响应。查看下面的代码。
function App() {
const [details, setDetails] = useState({ "value": "First" })
const [url, setUrl] = useState("")
const fetchWeather = async () => {
const { data } = await Axios.get(`https://api.weatherbit.io/v2.0/current?city=Modasa&key=24d74085081e4ec7b4971bec0a1f2ef3`)
// const details = data.data[0]
console.log(data)
setDetails(data)
}
useEffect(() => {
fetchWeather()
}, [])
return (
<div className="App">
<SectionOne data={details} />
</div>
);
}
export default App;
**以及我获取初始值的第二个组件（空对象）**
const SectionOne = ({ data }) => {
return (
<div>
<div className="sectionOne">
<span className="region">{`${data.data[0].city_name}`}</span>
<span className="country">{data.data[0].country_code}</span>
</div>
<div className="sectionTwo">
<span className="icon"><img source={data.data[0].weather?.icon} /></span>
<span className="temp">{data.data[0].temp}</span>
<span className="unit">°C</span>
<span className="feels">Feels Like {data.data[0].app_temp} °C | {data.data[0].weather?.description}</span>
</div>
<div className="sectionThree">
<div><span>Wind</span>{data.data[0].wind_spd} KM</div>
<div><span>Wind Dir.</span>{data.data[0].wind_cdir}</div>
<div><span>Humidity</span>{data.data[0].current?.humidity} %</div>
<div><span>Pressure</span>{data.data[0].pres} MB</div>
<div><span>UV Index</span>{data.data[0].uv}</div>
<div><span>Visibility</span>{data.data[0].vis} KM</div>
</div>
</div>
)
}
export default SectionOne
您将初始状态设置为{“ value”：“ First”}，但是SectionOne组件期望其他格式的数据，请尝试访问属性data.data [0] .city_name不存在。因此，您会出错。
您应该将初始状态设置为null
const [details, setDetails] = useState(null)
并在渲染中具有null值 这是最佳做法。
return (
<div className="App">
{ details && <SectionOne data={details} /> }
</div>
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句