Question

有人可以告诉我应该如何正确使用地图功能吗？我已阅读文档并尝试了几种方法。任何帮助都会很棒。

const searchResultsList = this.props.searchResults.map(function    (result){
            return (
                <li className="list-group-item">{result.urlName}</li>
            );
        });

Answer 1

根据您发布的错误，未立即定义this.props.searchResults。您可以采用以下两种方式之一。

在尝试映射之前检查变量是否未定义：

buildResultsList() {
    if (! this.props.searchResults) return null;

    return this.props.searchResults.map((result) => (
        <li key={result.uri} className="list-group-item">{result.urlName}</li>
    ));
}

或者当您将州映射到道具时，请设置默认值：

function mapStateToProps(state) {
    return { 
        searchResults: state.search.searchResult || [],
    };
}

Answer 2

您可以对connect返回的组件使用defaultProps，并将searchResults设置为空数组。

替换export default connect(mapStateToProps, actions)(Search); 用：

let ConnectedSearch = connect(mapStateToProps, actions)(Search);
ConnectedSearch.defaultProps = {
  searchResults: []
};
export default ConnectedSearch

将状态映射到prop - prop是未定义的

2 个答案: