將狀態映射到prop-prop未定義

Question

有人可以告訴我如何正確使用map函數嗎？ 我已經閱讀了文檔，並嘗試了幾種方法。 任何幫助都是極好的。

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