[英]I can't access the second level of a json after passing the data for props, in react js
I make a request with axios in a saga, which I receive in a component through the reduction in the mapStateToProps, if I go through the data in that component I can access any level but if I send it on props I can only access the first level of the json and on the second level I get Cannot read property 'route' of undefined我在传奇中向 axios 发出请求,我通过减少 mapStateToProps 在组件中收到该请求,如果我通过该组件中的数据 go 我可以访问任何级别,但如果我在道具上发送它我只能访问第一个json 的级别和第二级我得到无法读取未定义的属性“路线”
component where I trigger the action and receive the state, and I pass the props:我触发动作并接收 state 的组件,我传递了道具:
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);
component where I receive the props and the mappings:我收到道具和映射的组件:
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;
error that throws me:抛出我的错误:
API: API:
When accessing "route" you have to first check if the value is present in the object that component receives.访问“路由”时,您必须首先检查该组件接收的 object 中是否存在该值。
Try this:尝试这个:
<Product image={pro.imagen_principal && pro.imagen_principal.ruta}/>
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.