TypeError: this.props.produtos 在 React Filter 项目中为空?

Question

我一直在做一个电子商务项目，在那里我通过 Redux 将一些产品(produtos(传递到产品页面，但我一直在尝试使用 .filter(( 过滤它，它一直给我这个错误"TypeError：this.props.produtos is 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则将其替换为[]。