在单视图中创建表单和显示数据

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

function App() {
  const [formData, setFormData] = useState({});
  const [data, setData] = useState([]);

  useEffect(() => {
    // 假设这是从后端获取数据的API调用
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 假设这是提交表单数据的API调用
    fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
      setFormData({});
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  };

  return (
    <div>
      <h1>Data Form</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" onChange={handleChange} placeholder="Name" />
        <input type="email" name="email" onChange={handleChange} placeholder="Email" />
        <button type="submit">Submit</button>
      </form>
      <h2>Display Data</h2>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item.name} - {item.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

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

app.use(express.json());

let dataStore = [];

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

app.post('/api/submit', (req, res) => {
  dataStore.push(req.body);
  res.json({ message: 'Data submitted successfully' });
});

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