Yat*_*ngh 2 javascript reactjs
我面临着错误TypeError: Cannot read properties of undefined (reading 'map')
此代码应该返回卡片标题中的城市名称，该卡片标题是在我的其他文件中定义的，但会引发错误。
代码：
import React, {Component} from 'react';
import Body from './Body';
class Weather extends Component {
constructor(props) {
super(props);
this.state = {
weather: [],
};
}
async componentDidMount() {
const url = `http://api.weatherapi.com/v1/current.json?key=${this.props.api}&q=Jaipur&aqi=no`;
let data = await fetch(url);
let parsedData = await data.json();
this.setState({
weather: parsedData.weather,
});
}
render() {
return (
<div className="container">
<div className="row">
{this.state.weather.map((element) => {
return (
<div className="col-md-4">
<Body city={element.location.name} />
</div>
);
})}
</div>
</div>
);
}
}
export default Weather;
在 API 调用之前，您的天气this.state.weather.map数组为空，因此使用会导致错误。
map在使用with arrayes之前有两件重要的事情：
通过一个简单的语句检查其声明/定义if：
{
if(myArrayOfData) {
myArrayOfData.map(
// rest of the codes ...
)
}
}
或者使用?人手不足的if
{
myArrayOfData?.map(
// rest of the codes ...
)
}
检查数组的内容并map在检查其长度后使用该函数（这告诉您数据已从 API 调用等到达并准备好处理）
{
if(myArrayOfData) {
if(myArrayOfData.length > 0) {
myArrayOfData.map(
// rest of the codes ...
)
}
}
}
虽然上面的代码片段可以正常工作，但您可以通过if同时检查这两个条件来简化它：
{
if(myArrayOfData?.length > 0) {
myArrayOfData.map(
// rest of the codes ...
)
}
}
因此，只需对组件的返回进行一些更改Weather：
<div className="row">
{
if(this.state.weather?.length > 0) {
this.state.weather.map((element) => {
return (
<div className="col-md-4" key={element.id}> // also don't forget about the passing a unique value as key property
<Body city={element.location.name}/>
</div>
);
})
}
}
</div>
在实际示例中，您可能需要在获取数据时显示一些加载组件。
{
if(myArrayOfData?.length > 0) {
myArrayOfData.map(
// rest of the codes ...
)
} else {
<Loading />
}
}
const anEmptyArray = []
if(anEmptyArray){
// rest of the codes ...
}
比较的结果if(anEmptyArray)始终true为空数组。