传递道具的反应
传递道具的反应
提问于 2020-03-15 11:43:48
我只是试图通过组件传递道具，并在jsx中呈现它，但不知怎么的，那是行不通的。我在寻找问题，但就是找不到。
我正在尝试从这个组件中传递道具：
import React from "react";
import "../styles/Products.css";
import ProductItem from "../items/ProductItem";
class Products extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
fetch("../products.json")
.then(response => response.json())
.then(response => this.setState({ data: response.products }));
}
render() {
return (
<div className="products-container">
<ProductItem data={this.state.data[0]} />
</div>
);
}
}
export default Products;对这一构成部分：
import React from "react";
import "../styles/ProductItem.css";
const ProductItem = props => {
console.log(props.data, "current");
return (
<div className="product-item">
<img src="" alt="" className="bike-image" />
<div className="active-product" />
<div className="view-details">Compare</div>
<h2>Bike</h2>
<h4>downhill bike</h4>
<p>3500 PLN</p>
</div>
);
};
export default ProductItem;问题是，当我查看我的react dev tools时，道具已经正确传递了，但是当我试图获取对象的属性(如props.data.id )时，我得到了一个错误：
无法读取未定义
的属性'id‘
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-15 11:58:57
fetch需要一些时间来获得响应并填充this.state.data数组。因此，您需要检查this.state.data[0]值是否真正可用。你可以试试这个-
render() {
return (
<div className="products-container">
{this.state.data && this.state.data.length > 0 && <ProductItem data={this.state.data[0]} />}
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60692482
复制相关文章
相似问题
腾讯云开发者
