Question

我在我的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;

Answer 1

这种情况发生在第一次渲染时，因为你的places很可能来自一个已经解决的Promise，它使某个道具undefined。有一种解决方法，defaultProps。

SearchList.defaultProps = {
    places: [],

}

但是，如果您传递places，例如<SearchList places={this.state.places} />，则需要确保this.state.places未定义且不 null null值有效，将覆盖您的defaultProps。如果你想要防范，那么你需要进行条件渲染。

places && places.map()。

Answer 2

可以使用conditional rendering渲染您的地点。因此，如果未定义places，则不会呈现和运算符（＆amp;＆amp;）的右操作数

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

ReactJS：TypeError：无法读取未定义的属性“map”

2 个答案: