I can't access the second level of a json after passing the data for props, in react js
我在 saga 中使用 axios 发出请求,我通过减少 mapStateToProps 在组件中收到该请求,如果我通过该组件中的数据,我可以访问任何级别,但如果我在道具上发送它,我只能访问 json 的第一级,在第二级我得到 Cannot read property \\'route\\' of undefined
我触发动作并接收状态的组件,并传递道具:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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); |
我接收道具和映射的组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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:
当访问"路由"时,你必须首先检查该值是否存在于组件接收的对象中。
试试这个:
1 | <Product image={pro.imagen_principal && pro.imagen_principal.ruta}/> |
希望这会有所帮助!