[英]ReactJS: TypeError: Cannot read property 'map' of undefined
我在我的ReactJS应用程序中得到了这个错误,它提取了数据。 在我看来,当map()
指向null
时,错误显示
TypeError:无法读取未定义的属性“map”
我无法想出一种制作默认值的方法
这是代码:
import React, {Component} from 'react';
// This component is for search list view, it render the props places data,
// And handle cilck for place item.
class SearchList extends Component {
render() {
// const {places, query, selectPlace} = this.props;
const {places,query,selectPlace} = this.props;
return (
<div className="container">
<hr/>
<div className="input-group">
<input
type="text"
className="form-control"
placeholder="Filter"
aria-label="Filter Input"
onChange={(event) => {
query(event.target.value);
}}
/>
<span className="input-group-addon">
<i className="fas fa-filter"></i>
</span>
</div>
<hr/>
<div style={{maxHeight: '82vh', overflow: 'scroll'}}>
<ul className="list-group">
{
places.map(place => (
<li
tabIndex="0"
key={place.id}
className="list-group-item list-group-item-action"
onClick={() => selectPlace(place)}>
<span>{place.name}</span>
</li>
))
}
</ul>
</div>
</div>
);
}
}
export default SearchList;
这发生在第一次渲染时,因为很可能你的places
来自一个已解决的Promise,它使得该prop undefined
。 有一种方法可以解决这个问题, defaultProps
。
SearchList.defaultProps = {
places: [],
}
但是,如果您正在传递places
,例如<SearchList places={this.state.places} />
,则需要确保this.state.places
未定义且不为 null
因为null值有效并将覆盖defaultProps
。 如果你想要防止这种情况,那么你需要进行条件渲染。
places && places.map()
。
可以使用条件渲染来渲染场所。 因此,如果未定义places
则不会呈现和运算符(&&)的右操作数
<ul className="list-group">
{
places && places.map(place => (
<li
tabIndex="0"
key={place.id}
className="list-group-item list-group-item-action"
onClick={() => selectPlace(place)}>
<span>{place.name}</span>
</li>
))
}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.