时间戳

首页 > 解决方案 > 如何使用 ReactJS 从端点获取数据

reactjs - 如何使用 ReactJS 从端点获取数据

问题描述

在此处输入图像描述我想使用这种方式获取数据：

import React, { useState, useEffect } from 'react';

const Home = () => {

  useEffect (async () =>{
    const response = await fetch('http://localhost:4000/user')
      const myJson = await response.json();
      console.log(JSON.stringify(myJson));
  })
 
  return(
    <div>
      <h1>Home Page</h1>
    </div>
  )
}

export default Home;

localhost:4000 （使用节点 js 生成）的结果是：{ _id: 5da4a2066f90a24d4f82787a, name: 'Gregor', email: 'test@eee.com', age: 3, hasCar: false, favColors: [ 'green', 'red' ] }. 问题是我无法从这个端点获取数据，但是当我放置一个测试 API 而不是我的本地主机时，代码可以工作。如何使用我的实现从该端点获取数据？我的代码有什么问题？

这是我在控制台中的错误。 在此处输入图像描述

在此处输入图像描述

标签： reactjsfetch

解决方案

要消除该警告，您需要将异步片段提取到它自己的函数中。就像是：

useEffect (() => {

    const fetchData = async () => {
      const response = await fetch('http://localhost:4000/user')
      const myJson = response.json()
      console.log(JSON.stringify(myJson))
    }

    fetchData()
  }, [])

但这不应该是您无法获取数据的原因。您需要确保http://localhost:4000的 api启用了 CORS，以便 react 可以与之通信。如果您无法更改，则需要设置代理：https ://create-react-app.dev/docs/proxying-api-requests-in-development/

推荐阅读