[英]Problem with accessing value from .JSON (path issue probably)
I have a react component that uses api data: 我有一个使用api数据的react组件:
class Item extends Component {
constructor(props) {
super(props);
this.state = {
output: {}
}
}
componentDidMount() {
fetch('http://localhost:3005/products/157963')
.then(response => response.json())
.then(data => this.setState({ output: data }));
}
render() {
console.log(this.state.output);
const { general = {name:""} } = this.state.output;
const { id } = this.state.output;
const { images = {large:""} } = this.state.output;
return (
<ItemPanel>
<ItemBox>
<BoxTitle>{general.name}</BoxTitle>
<BoxId>Item ID: {id}</BoxId>
<Details onClick={show_details}>Show more...</Details>
<Inline>
<Quantity type="number" defaultValue="1"></Quantity>
<Icon>add_shopping_cart</Icon>
</Inline>
<AddItem>
<Sfont>Add to cart</Sfont>
</AddItem>
</ItemBox>
<BoxImg src={images} alt='img error'></BoxImg>
</ItemPanel>
);
}
}
export default Item;
and this is what .JSON look like: 这就是.JSON的样子:
{
"id": "774944",
"general": {
"presentable_id": "774944",
"name": "Blekk BROTHER LC1280XLC blå",
"description": ""
},
"brand": {
"name": "Brother Norge AS"
},
"images": {
"primary": {
"large": "https://i.imgur.com/zYcibjw.jpg"
}
}
}
I need to access the image src link from "large" in 'images/primary'. 我需要从“ images / primary”中的“ large”访问image src链接。 Have tried many variations here, but it always returns as empty or undefined object :/
在这里尝试了许多变体,但它总是返回为空或未定义的对象:/
const {images:{primary:{large}}} = this.state.output;
console.log(large)
you'll have the image path in large variable. 您将在大变量中使用图像路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.