javascript - 无法从 API 正确获取数据

Question

我目前正在为 future 的项目尝试 React，并试图让自己跟上它的速度。

请耐心等待，由于某些情况我已经两年没有编码了，所以我非常生疏。

无论如何，我需要让 React 正确获取一些有关所写任务的数据，但无论我尝试什么，它都不起作用。我有一个函数写为

  getDataFromDb = () => {
fetch("http://127.0.0.1:8080/api/getTask")
  .then(response => response.json())
  .then(data => this.setState({ tasks: data.tasks, isLoading: false }))
  .catch(error => this.setState({error, isLoading: false}));
};

现在我的输出在 JSX 文件中

<React.Fragment>
  <h1>Random User</h1>
  {error ? <p>{error.message}</p> : null}
  {!isLoading ? (
    tasks.map(task => {
      const { title, description } = task;
      return (
        <div key={title}>
          <p>Title: {title}</p>
          <p>Desc: {description}</p>
          <hr />
        </div>
      );
    })

  ) : (
    <h3>Loading...</h3>
  )}
</React.Fragment>

无论我尝试使用自己的数据库做什么，它只是不想与 React 一起使用。我尝试通过 Postman 调用 API，所有内容都可以顺利发送和接收，但 React 会发出错误“无法获取”。

在我的 server.js 中，我编写了以下 api 调用

router.get("/getTask", (req, res) => {
Task.find((err, task) => {
if (err) return res.json({ success: false, error: err });
return res.json({ success: true, task: task });
  });
});

我已经在互联网和堆栈上搜索了一些答案和示例，而且，最愚蠢的是，如果我使用外部 API(例如“https://hn.algolia.com/api/v1/search?query=redux”)或任何其他 API，老实说，那么它就可以正常工作。如果有什么区别的话，我使用 MongoDB 的 mLabs 沙箱。

有什么建议吗？在过去 5 个小时左右的时间里一直坚持这个问题。

Answer 1

您的提取请求似乎将发送至本地主机地址和端口。确保您的服务器上正确设置了 CORS，以允许来自同一地址和不同端口的传入连接。 Postman 通常适用于任何正确设置的服务器，无论 CORS 设置如何。我不确定 fetch，但使用 axios，如果您打印错误对象，它应该为您提供更多可供使用的信息。

此外，stever 的评论也是正确的，因为您没有使用此状态任务，因此未定义任务。