如何在Reactjs中显示来自MongoDB的数据？

// 后端代码（Node.js服务器）
const express = require('express');
const MongoClient = require('mongodb').MongoClient;

const app = express();
const port = 3000;

// 连接到MongoDB数据库
MongoClient.connect('mongodb://localhost:27017', (err, client) => {
  if (err) throw err;
  
  const db = client.db('mydatabase');
  const collection = db.collection('mycollection');

  // 创建API端点，从MongoDB获取数据
  app.get('/api/data', (req, res) => {
    collection.find().toArray((err, result) => {
      if (err) throw err;
      res.json(result);
    });
  });

  // 启动服务器
  app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
  });
});

// 前端代码（React组件）
import React, { Component } from 'react';

class DataDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    // 从API端点获取数据
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        <h1>Data from MongoDB:</h1>
        <ul>
          {data.map(item => (
            <li key={item._id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default DataDisplay;