Question

未捕获的类型错误：即使在数组上使用它，也无法读取 reactjs 中未定义的属性“map”

2019-08-08

443

javascript reactjs redux react-redux

我正在尝试渲染来自 nodejs api 的数据，我正在使用 redux 进行状态管理。问题是当我尝试映射数据时，它给出了这样的错误。

Uncaught TypeError: Cannot read property 'map' of undefined

This is my code /home.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {getArticle} from '../../redux/actions/article';


class Home extends Component {
    componentDidMount() {
        this.props.getArticle();
    }

    render() {
        console.log(this.props.article.article);
        

        return (
            <div>
                {this.props.article.article.data.map(val => console.log(val)) }}
            </div>
        );
    }
}
const mapStateToProps = state => ({
   article: state.article
});

export default connect(mapStateToProps, {getArticle})(Home);

this is the log when i run this.props.article.article

Answer 1

发生这种情况是因为您没有在 redux 中为 article 设置任何默认值，因此当您的组件首次呈现时， article 为空，这就是 map 抛出错误的原因。

通过这样做，您可以确保 this.props.article.article.data 是否已定义。如果已定义，则只有 this.props.article.article.data.map(val => console.log(val)) 您的 map() 会执行并 console.log 该值，但如果未定义，则什么也不做。您可以尝试使用这个吗：

 return (
            <div>
                {this.props.article.article.data && this.props.article.article.data.map(val => console.log(val)) }}
            </div>
        );

Answer 2

这是因为，组件正在尝试在网络调用完成之前进行渲染。

在进行映射之前，我们检查文章数据是否可用。尝试这样做：

return (
            <div>
                {this.props.article.article.data? this.props.article.article.data.map(val => console.log(val)):'Loading' }
           </div>
        );