尝试使用ListView在网页上显示模型数据。它不工作

// server.js
const express = require('express');
const app = express();
const port = 3000;

let data = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  // 更多数据...
];

app.get('/api/data', (req, res) => {
  res.json(data);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

// App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function ListView() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3000/api/data')
      .then(response => {
        setItems(response.data);
      })
      .catch(error => {
        console.error("There was an error fetching the data!", error);
      });
  }, []);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <div className="App">
      <h1>Data List</h1>
      <ListView />
    </div>
  );
}

export default App;

// 在Express应用中添加CORS中间件
const cors = require('cors');
app.use(cors());