Question

我目前正在为将来的项目尝试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 });
  });
});

我已经在Internet和Stack上搜索了一些答案和示例，最愚蠢的是，如果我使用外部API（例如“ https://hn.algolia.com/api/v1/search?query=redux”）或任何其他内容，那么说实话就可以了。如果有什么不同，我可以在MongoDB中使用mLabs沙箱。

有什么建议吗？最近5个小时左右一直停留在此。

Answer 1

您的提取请求似乎将转到本地主机地址和端口。确保在服务器上正确设置了CORS，以允许来自同一地址的不同端口的传入连接。不管CORS设置如何，Postman通常都能正确地用于任何服务器设置。我不确定是否要获取，但是使用axios，如果您打印错误对象，它将为您提供更多信息。

此外，由于您未使用此状态任务，因此未定义任务也使stever的注释正确。

Answer 2

在生命周期中的任何时候，或者与事件相关的事件（例如按钮上的getDataFromDb()等），您都需要在组件内部调用onClick。

如果您需要它首先加载并且组件是一个函数，则可以执行以下操作

import React, {useState} from 'react;

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

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

或在componentDidMount()内（如果您使用的是类组件）

axios库对于获取数据确实是一个很好的包装器：）

无法从API

2 个答案: