如何从 mongoDB 获取数据并将其显示在反应前端答案

【问题标题】：How can I fetch data from mongoDB and display it on react front end如何从 mongoDB 获取数据并将其显示在反应前端
【发布时间】：2022-01-09 04:23:17
【问题描述】：

我是 MERN 的新手，我正在学习它。我不知道如何从特定集合中获取所有数据并将每条记录的数据显示在单独的卡片上。我已经开发了后端代码，并且当我通过邮递员发送请求时工作正常，但是从 React 应用程序获取和显示数据对我来说是个问题。我该怎么做？

我的后端 API 代码

router.get('/ads', async (req,res,next)=>{
  try{
    const ads = await Ads.find();

    return res.status(200).json({
      success: true,
      count: ads.length,
      data: ads,
    });
  } catch(err) {
    console.log(err);
    res.status(500).json({ error: 'server error' });
  }
});

【问题讨论】：

标签： javascript node.js reactjs mongodb

【解决方案1】：

只需使用 AXIOS 库在前端进行 REST 调用。您在 nodejs 项目中创建的只是一个端点，现在您必须从前端对端点进行 API 调用。

Heartbit 的回答也很恰当，但通常在 React 中，开发人员使用 AXIOS 库进行其余 API 调用。

在此处阅读文档：https://www.npmjs.com/package/axios

当你开始观看关于 AXIOS 的教程时，如果文档对你来说太多的话。

导入 Axios 后，在 useEffect 钩子中，你应该这样写：

axios.get('/ads')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

【讨论】：

【解决方案2】：

您可以通过多种方式查询以从 API 服务器获取数据。所以在这里我试图描述其中的两个。

1.通过原生浏览器Fetch API：


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    <AdsComponent data={data}>
      {children}
    </AdsComponent>
  )
}

2。 react-query:

这将为您提供更多同步处理，例如 loading、Error、Caching 等。

首先，在您的app 的顶层，您应该提供它。

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <AdsContainer />
      </div>
    </QueryClientProvider>
  );
}

那么你的AdsContainer 可以获取如下数据：

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    <AdsComponent data={query.data}>
      {children}
    </AdsComponent>
  )
}

【讨论】：

【解决方案3】：

我建议你安装 axios。

了解更多https://www.npmjs.com/package/axios
使用：

useEffect(() => {
  const getAds = async () => {
    const res = await axios.get('/ads')
    console.log(res.data)
  }
  getAds()
}, [])

【讨论】：