如何从 Express API 获取数据并将其显示到 React 应用程序？

Posted 2023-02-22

【中文标题】如何从 Express API 获取数据并将其显示到 React 应用程序？

【英文标题】：How to fetch and display data from Express API to a React app?

【发布时间】：2020-06-11 00:14:23

【问题描述】：

我最近开始学习 React，我正在尝试创建一个应用程序，该应用程序使用我使用 Express 创建的 API。

目前我在 http://localhost:3000/api 本地托管我的 Express API

但是，当我打开邮递员或浏览器并向http://localhost:3000/api/tasks 发送 GET 请求时，我得到了我的 API 上的所有任务，正如预期的那样。

我的反应应用看起来像这样

class App extends React.Component
  constructor()
    super()
    this.state = 
      tasks: 
    
  
...
  componentDidMount() 
     this.setState(loading: true)
     fetch("http://localhost:3000/api/tasks/1")
       .then(response => response.json())
       .then(data => 
         this.setState(
           tasks: data
         )
       )
   
...
  render() 
    return(
      <div>
        <p>this.state.tasks.id</p>
      </div>
  

当我在浏览器中打开开发选项卡时，我可以看到请求（代码：304）已发送，并且响应是包含我需要的对象的 json 文件。不过，我无法显示从 API 获取的数据。

【问题讨论】：

您检查是否有任何控制台错误？

你能告诉我们json响应应该是什么样子吗？我冒险猜测并说tasks 是一个数组（因此tasks.id 将是undefined），如果是这种情况，你会想要this.state.tasks.map(task => <p>task.id</p>)

请出示您对请求的回复。

同时运行 API 和 react 应用程序时没有控制台错误

【参考方案1】：

问题是没有启用 CORS！添加后：

app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
);

到我的 Express API 的 index.js 文件中，我能够从 API 获取数据并将其显示到反应应用程序。

【参考方案2】：

有一个 node.js 包用于提供 Connect/Express 中间件，可用于通过各种选项启用 CORS。

(npm cors)

【参考方案3】：

我可以给你我的示例代码，因为如果不调试就很难从你的代码中看到错误。

我正在使用Nextjs，这是我使用fetch 方法从服务器端获取数据的方法。

const SamplePage = props => 
    // you can get data from api here from props.data

    const [ testState, setTestState] = useState(
        test: props.data,
    );


    return (
        ...
    )


SamplePage.getInitialProps = async ctx => 
    try 
        const  token, username  = nextCookie(ctx);
        const apiUrl = getHost(ctx.req) + `/api/portfolio/$ctx.query.id`;
        const response = await fetch(apiUrl, 
            method: 'GET',
            headers: 
                Authorization: JSON.stringify( token, username )
            
        );

        if (response.ok) 
            const data = await response.json();
            return  data ;
         else 
            // add your action when response is not ok
        
     catch (error) 
        // add your action when have error
    
;

export default withAuthSync(SamplePage);