如何解决从服务器获取的数据未显示在前端屏幕上MERN 堆栈
我正在尝试通过听 youtube 上的一些讲座来开发一个类似于亚马逊的网站。我创建了一个 MongoDB 数据库,然后通过 express 服务器获取数据,然后将其传递给前端 React 应用程序。我检查了控制台,发现获取的产品数据是正确的,redux 商店也显示了产品数据,但不知何故没有显示出来。 请帮忙。
请看ProductScreen的代码。我试图通过将 console.log ({product.name} ) 放在 return 语句中来进行检查。这是空白,所以我想问题是产品没有在代码中分配给 const 产品。
import React,{ useEffect,useState } from 'react';
import { usedispatch,useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { detailsProduct } from '../actions/productActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import rating from '../components/rating';
export default function ProductScreen(props) {
const dispatch = usedispatch();
const productId = props.match.params.id;
const [qty,setQty] = useState(1);
const productDetails = useSelector((state) => state.productDetails);
const { loading,error,product } = productDetails;
useEffect(() => {
dispatch(detailsProduct(productId));
},[dispatch,productId]);
const addToCartHandler = () => {
props.history.push(`/cart/${productId}?qty=${qty}`);
};
return (
<div>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<div>
<Link to="/">Back to result</Link>
<div className="row top">
<div className="col-2">
<img
className="large"
src={product.image}
alt={product.name}
></img>
</div>
<div className="col-1">
<ul>
<li>
<h1>{product.name}</h1>
</li>
<li>
<rating
rating={product.rating}
numReviews={product.numReviews}
></rating>
</li>
<li>Pirce : ${product.price}</li>
<li>
Description:
<p>{product.description}</p>
</li>
</ul>
</div>
<div className="col-1">
<div className="card card-body">
<ul>
<li>
<div className="row">
<div>Price</div>
<div className="price">${product.price}</div>
</div>
</li>
<li>
<div className="row">
<div>Status</div>
<div>
{product.countInStock > 0 ? (
<span className="success">In Stock</span>
) : (
<span className="danger">Unavailable</span>
)}
</div>
</div>
</li>
{product.countInStock > 0 && (
<>
<li>
<div className="row">
<div>Qty</div>
<div>
<select
value={qty}
onChange={(e) => setQty(e.target.value)}
>
{[...Array(product.countInStock).keys()].map(
(x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
)
)}
</select>
</div>
</div>
</li>
<li>
<button
onClick={addToCartHandler}
className="primary block"
>
Add to Cart
</button>
</li>
</>
)}
</ul>
</div>
</div>
</div>
</div>
)}
</div>
);
}
import { createStore,compose,applyMiddleware,combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { cartReducer } from './reducers/cartReducers';
import {
productDetailsReducer,productListReducer,} from './reducers/productReducers';
const initialState = {
cart: {
cartItems: localStorage.getItem('cartItems')
? JSON.parse(localStorage.getItem('cartItems'))
: [],},};
const reducer = combineReducers({
productList: productListReducer,productDetails: productDetailsReducer,cart: cartReducer,});
const composeEnhancer = window.__Redux_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,initialState,composeEnhancer(applyMiddleware(thunk))
);
请看截图。
解决方法
在后端的 productRouter 代码中有一个小错误(见下面的代码)。而不是 res.send (product)...我正在发送 res.send。发送 ({product}) 并且因此我得到的 json 对象采用以下格式:productDetails { product: {product :{....}}}。所以,当我提到 product.object 时,它基本上是 null,所以我没有得到任何渲染。所以,要么我必须使用 product.product.object 要么只是更正 productRouter 上的代码。
代码:
productRouter.get(
'/:id',expressAsyncHandler(async (req,res) => {
const product = await Product.findById(req.params.id);
if (product) {
**res.send(product);**
} else {
res.status(404).send({ message: 'Product Not Found' });
}
})
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。