在通过js传递道具数据后，我无法访问json的第二级

Question

我通过axios提出了一个请求，我通过mapStateToProps的减少在一个组件中收到该请求，如果我查看该组件中的数据，则可以访问任何级别，但是如果我通过props发送它，则只能访问json的第一级，在第二级，我得到无法读取未定义的属性“ route”

我在其中触发动作并接收状态并传递道具的组件：

import React, { Component } from 'react';
import Aux from '../../hoc/Auxiliary';
import Products from '../../Components/ProductsSencillo/Products'
import { Grid } from 'styled-css-grid';
import { connect } from 'react-redux'
import { productComplete } from '../../redux/actions/productAction'
import reducerProduct from '../../redux/modules/reducers/productReducer'
import { bindActionCreators } from 'redux';

class ProductBuilder extends Component {
  componentDidMount() {
    this.props.handleListar();
  }
  render() {
    return (
      <Aux>
        <Grid columns="repeat(auto-fit,minmax(45px,1fr))">
          <Products products={this.props.state} />
        </Grid>
      </Aux>
    );
  }
}

const mapStateToProps = (state) => ({
  state: state.productReducer.productos.productos
})
const mapDispatchToProps = dispatch => ({
  handleListar: bindActionCreators(productComplete, dispatch),
})

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

我收到道具和地图的组件：

import React, { Component } from 'react';
import Product from './Product/Product'
import { Cell } from 'styled-css-grid';

class Products extends Component {
  render() {
    return {
      this.props.products.map(pro => {
        return <Cell width={3}>< Product
          image={pro.imagen_principal.ruta}
          name={pro.nombre}
        />
        </Cell>
      })
    }
  }
}

export default Products;

引发我的错误：

API：

Answer 1

访问“路由”时，必须首先检查组件接收的对象中是否存在该值。

尝试一下：

<Product image={pro.imagen_principal && pro.imagen_principal.ruta}/>

希望这会有所帮助！