Reactjs 从服务器获取的数据未显示在前端屏幕上（MERN堆栈）

我在youtube上做了一些演讲，试图开发一个类似亚马逊的网站。我创建了一个MongoDB数据库，然后通过express服务器获取数据，然后将其传递给前端应用程序。我在控制台上检查了一下，发现获取的产品数据是正确的，redux商店也显示了产品数据，但不知怎么的，它没有显示出来。 请帮忙

请参见ProductScreen的代码。我试图通过将console.log（{product.name}）放在return语句中进行检查。这是空白的，所以我想问题是，在代码中，产品并没有被分配到constproduct

import React，{useffect，useState}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从'react router dom'导入{Link}；
从“../actions/productActions”导入{detailsProduct}；
从“../components/LoadingBox”导入LoadingBox；
从“../components/MessageBox”导入MessageBox；
从“../components/Rating”导入评级；
导出默认功能ProductScreen（道具）{
const dispatch=usedpatch（）；
const productId=props.match.params.id；
const[qty，setQty]=useState（1）；
const productDetails=useSelector（（state）=>state.productDetails）；
const{loading，error，product}=productDetails；
useffect（（）=>{
调度（详细产品（产品ID））；
}，[dispatch，productId]）；
常量addToCarthHandler=（）=>{
props.history.push（`/cart/${productId}？qty=${qty}`）；
};
返回(
{加载(
)：错误(
{错误}
) : (
回归结果


{product.name}



皮尔斯：${product.price}

说明：
{product.description}





价格
${product.price}


地位
{product.countInStock>0(
有现货的
) : (
不可用的
)}

{product.countInStock>0&&(

数量
设置数量（即目标值）}
>
{[…数组（product.countInStock.keys（））.map(
（x） =>(
{x+1}
)
)}


添加到购物车

)}

)}
);
}

后端的productRouter代码中有一个小错误（请参阅下面的代码）。我没有发送res.send（product）…而是发送res.send（{product}），因此我得到的json对象的格式是：productDetails{product:{product:{……}}。所以，当我引用product.object时，它基本上是空的，所以我没有得到任何渲染。所以，要么我必须使用product.product.object，要么干脆在productRouter上更正代码

代码：

---

你能添加reduce商店吗？@Filipe，我为redux商店添加了代码

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' });
    }
  })
);