如何在已通过Proxy连接Express的React项目中获取MongoDB数据？

嘿，我来帮你一步步搞定这个问题！首先你得先在Express后端加一个API接口，把存在MongoDB里的Header数据暴露出来，然后在React前端去请求这个接口就行啦。

第一步：在Express中创建GET接口 #

现在你只有往MongoDB存数据的代码，还没有给前端提供可访问的接口，所以先补这部分。找到你的Express路由文件（比如routes/header.js，或者直接在主app文件里），添加如下代码：

// 引入你已经定义的HeaderSection模型
var HeaderSection = require('../../models/sections/header_SC');
var mongoose = require('mongoose');

// 添加GET接口，返回header数据
app.get('/api/header', async (req, res) => {
  try {
    // 从MongoDB查询第一条HeaderSection数据（因为你存的是单条数据）
    const headerData = await HeaderSection.findOne(); 
    // 如果数据库里还没数据，返回提示
    if (!headerData) {
      return res.status(404).json({ message: 'Header data not found' });
    }
    // 把数据以JSON格式返回给前端
    res.json(headerData);
  } catch (error) {
    // 处理查询出错的情况
    res.status(500).json({ message: error.message });
  }
});

小提醒：如果你的headerSc数组里的数据还没真正存入MongoDB，记得在Express启动时执行插入操作（比如HeaderSection.insertMany(headerSc)），不然数据库是空的，接口返回不了数据哦。

第二步：在React中请求接口获取数据 #

接下来在React组件里，我们可以用原生的fetch或者第三方库axios来请求上面的接口。这里用React的useState和useEffect钩子来处理数据的获取、加载状态和错误：

方法1：使用原生fetch #

import { useState, useEffect } from 'react';

function Header() {
  const [headerData, setHeaderData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 利用已配置的Proxy，直接请求接口路径
    fetch('/api/header')
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to fetch header data');
        }
        return response.json();
      })
      .then(data => {
        setHeaderData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []); // 空依赖数组确保只在组件挂载时请求一次

  // 处理加载和错误状态
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  // 渲染获取到的数据
  return (
    <header>
      <img src={headerData.imagePath} alt="Header" />
      <h1>{headerData.title}</h1>
      <p>{headerData.description}</p>
      <button>{headerData.buttonText}</button>
    </header>
  );
}

export default Header;

方法2：使用axios（更简洁的请求方式） #

如果你更喜欢用axios，可以先在React项目里安装：

npm install axios
# 或者
yarn add axios

然后组件里的代码：

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

function Header() {
  const [headerData, setHeaderData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('/api/header')
      .then(response => {
        setHeaderData(response.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <header>
      <img src={headerData.imagePath} alt="Header" />
      <h1>{headerData.title}</h1>
      <p>{headerData.description}</p>
      <button>{headerData.buttonText}</button>
    </header>
  );
}

export default Header;

为什么这样可行？ #

因为你已经配置了Express和React之间的Proxy，前端请求/api/header时会自动转发到Express服务器对应的接口，不需要写完整的域名，非常方便。

内容的提问来源于stack exchange，提问作者HDallakyan