获取后如何显示数据答案

【问题标题】：How to show data after fetching获取后如何显示数据
【发布时间】：2022-11-22 15:44:05
【问题描述】：

我正在从 Mongodb 获取数据，但数据显示我未定义，当我在 Postman 中尝试它时它正在工作但在应用程序中它不是。

API端The Router:

router.get("/:shopName", async (req, res) => {
    const shopIdOrName = req.params.shopName;
    var shop;
    try {
       // check if its valid id, else its name
       if(mongoose.isValidObjectId(shopIdOrName)){
          shop = await Shop.findById(shopIdOrName )
       } else {
          shop = await Shop.findOne({ shopName: shopIdOrName });
       }
       const { updatedAt, ...others } = shop._doc;
       res.status(200).json(others);
     } catch (err) {
       res.status(500).json("Shop not found!");
     }
   });

客户端ShopPage.jsx:

  const [shop, setShop] = useState({});
  const shopName = useParams().shopName;

  useEffect(() => {
    const fetchShop = async () => {
      const res = await axios.get(`/shops?shopName=${shopName}`);
      setShop(res.data);
    };
    fetchShop();
  }, [shopName]);

return (
                <Box>
                  <Typography
                      className=""
                      mt="5px"
                      variant="h5"
                      fontWeight="medium"
                      align="left"
                      style={{ color: "black" }}>
                      {capitalizeFirstLetter(`${shop.shopName} `)} 
                  </Typography>
                </Box>
);

在我的客户端App.js我正在使用这条路线：

<Route path="/:shopName" element={<ShopPage />}>
</Route>

它应该向我显示商店名称，但它向我显示“未定义”，我不知道我在这里缺少什么。

【问题讨论】：

您可以通过 console.log(res.data) 查看它包含的内容。
在第一次渲染时，你的商店不包含 shopName 因为它只是 {}，所以也许你可以添加条件来渲染你的组件 { shop?.shopName && <Box>...</Box>}

标签： javascript node.js reactjs

【解决方案1】：

我可以看到您正在接受后端的路线是 '/:shopname' 但是从前端你发送它就像 /shops?shopName=${shopName} 这是一个查询字符串。你应该像这样发送

axios.get(`${shopName`)

或者如果您在后端的路由与路径绑定 /shop/shopname 那么您应该像这样从前端发送请求：

axios.get(`/shop/${shopName`)

【讨论】：