时间戳

首页 > 解决方案 > Api 没有在 reactJs 中获取

javascript - Api 没有在 reactJs 中获取

问题描述

我正试图用它的钥匙取食物。在邮递员 api 中工作正常，但它没有响应。后端代码

 app.get('/foods/:key', (req, res) => {
    foodsCollection.find({ key: req.params.key }).toArray((err, documents) => {
      res.send(documents[0])
    })
  })

前端代码

const { key } = useParams()
  const [foodById, setFoodById] = useState({})

  useEffect(() => {
    fetch(`http://localhost:5000/foods/${key}`)
      .then((res) => res.json())
      .then((data) => {
        setFoodById(data)
      })
  }, [key])

这是前端页面

路线页面

Api 正在工作

不在前端渲染

标签： javascriptreactjs

解决方案

尽管您在上面添加了一些图像，但最重要的是缺少，即浏览器的开发人员工具说明了问题所在。Console您应该在选项卡中以及该特定请求的选项卡中看到一些消息Network（如果确实正在发出）。除非有人看到这一点，否则很难帮助您解决问题。

如果您还没有，我建议使用create-react-app (CRA) 搭建任何 React 应用程序。这将为您提供一个可以开始工作的应用程序。您可以忽略开发中与CORS相关的问题，如果使用 CRA，则通过将"proxy": "http://localhost:5000", 添加到您的package.json文件中，有关此方法的更多信息，请参见此处，但请记住，这仅适用于本地开发。您也可以通过运行标志来启动Chrome以忽略网络安全，但这确实不是一个好主意，更多的是一种快速确定您是否遇到 CORS 问题的方法，因为 Chrome 会掩盖一些与 CORS 相关的问题，当事实上他们不是。--disable-web-securitychromium --disable-web-security

我还建议将您的获取代码更改为使用await，因此您将拥有：

const response = await fetch(`http://localhost:5000/foods/${key}`);

if (!response.ok) {
  console.error(`Error message: ${response.statusText} ${response.status}`);
}

const result = response.json();
console.log(result);

这不是必需的，但我总是发现它比方法更容易阅读then/catch/finally。

推荐阅读