如何通过单击产品来显示产品项1?我已经调用了产品的id，但我无法显示产品的全部数据

Question

我已经调用了产品的id，但我无法显示产品的全部数据，例如名称、库存和图像

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div className="row row-cols-1 row-cols-sm-2 row-cols-xl-4">
{products.items.map(item => (
<div className="col mb-sm-3" key={item._id}>
<div className="card product-card-single mb-sm-3 h-100">
<img
src="https://via.placeholder.com/198x144"
className="card-img-top"
alt="..."
/>
<div className="card-body">
<h5 className="card-title">
<Link to={"Product-page/ProductPage/" + item._id}>{item.name}</Link>
</h5>
</div>
<div className="card-footer">
<p className="card-text price mb-1">
<strong>₱ {item.price}</strong>
</p>
<Link to="" className="btn btn-primary">
Add to Cart
</Link>
</div>
</div>
</div>
))}
</div>

ProductPage由以下Route 呈现

<Route exact path="/Product-page/ProductPage/:productID" component={ProductPage} />

产品提取服务如下

function getById(id) {  
const requestOptions = { method: 'GET', headers: authHeader() }; 
return fetch(Config.api.basepath+/product/+id,requestOptions)
.then(handleResponse); 
}

这是我的产品页面

componentDidMount() {
let id = this.props.match.params.productID
this.setState({
id: id
})
}

Answer 1

您需要在产品页面上获取并显示基于id的产品详细信息

假设您正在使用react钩子并将ProductPage实现为一个功能组件，那么您可以简单地使用useEffect钩子来获取数据

const ProductPage = ({ match }) => {
const { params } = match;
const { productID } = params;
const [product, setProduct] = useState({isLoading: true, product {}});
useEffect(() => {
getyId(productId).then(product => setProduct({isLoading: false, product}));
}, [productID]);
if(product.isLoading) {
return <Loader/>
}
return <div>{product.product.name}</div>
}

---

如果您不使用react挂钩并实现类组件，则必须使用componentDidMount和componentDidUpdate生命周期的组合来获取产品数据

class ProductPage extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
product: {}
}
}
componentDidMount() {
this.fetchProduct();
}
componentDidUpdate(prevProps) {
if(prevProps.match.params.productID !== this.props.match.params.productID) {
this.fetchProduct();
}
}
fetchProduct() {
this.setState({isLoading: true});
getyId(productId).then(product => this.setState({isLoading: false, product}));
}
render() {
if(this.state.isLoading) {
return <Loader/>
}
return <div>{this.state.product.name}</div> 
}
}