TypeError：在React Filter项目中this.props.produtos为null？

Question

我一直在做一个电子商务项目，在那里我通过Redux将一些产品（produtos）传递到产品页面，但我一直在尝试使用.filter（）过滤它并且它一直给我这个错误“TypeError：this .props.produtos为null“。如果我不使用Filter（），我的产品会正确显示，但没有过滤。

这是代码（你可以在render（）之后找到.filter

class Produtos extends Component {

    loadProdutosHandler() {
        if (!this.props.produtos) {
            developmentServer.get('jogos')
                .then(response => {
                    this.props.updateProdutosHandler(response.data.data);
                });
        }
    }

    componentDidMount() {
        this.loadProdutosHandler();
    }

    componentDidUpdate() {
        this.loadProdutosHandler();
    }

    produtoClickedHandler = (id) => {
        if (this.props.showSidebar) {
            this.props.sidebarChangedHandler(false);
        }

        this.props.history.replace({ pathname: this.props.match.url + '/' + id });
    }

    render() {


        const key = 'xbox';
        let produtos = <Loader />;

        if (this.props.produtos.filter(produtos => 
            this.props.produtos.map(produtos => this.props.produtos.plataforma))
        )
         {
            produtos =
                <div className={classes.Produtos}>
                <Banner src={img} />
                    <div className={classes.Formata}>
                        <SideBar />
                        <section className={classes.SectionProduto}>
                            <ListaCatalogo produtos={this.props.produtos}
                                url={this.props.match.url}
                                clicked={this.produtoClickedHandler} />
                        </section>
                    </div>
                </div>
        }

        return produtos;
    }
}

const mapStateToProps = state => {
    return {
        showSidebar: state.layoutRdc.showSidebar,
        produtos: state.produtosRdc.produtos
    }
}

const mapDispatchToProps = dispatch => {
    return {
        sidebarChangedHandler: (value) => dispatch(actionCreators.showSidebar(value)),
        updateProdutosHandler: (value) => dispatch(actionCreators.updateProdutos(value))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Produtos);

Answer 1

也许produtos在您的视图的第一次渲染时为空！看看你定义你的produtosRdc的位置，如果produtos默认值是null，用[]替换它。