我的JSON服务器在ReactJS中通过Typicode更新数据库

// 安装json-server
npm install -g json-server

// 创建db.json文件
{
  "users": [
    { "id": 1, "name": "John" },
    { "id": 2, "name": "Jane" }
  ]
}

// 启动JSON服务器
json-server --watch db.json --port 3000

// 在ReactJS中更新用户数据
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3000/users')
      .then(response => {
        setUsers(response.data);
      });
  }, []);

  const updateUser = (id, name) => {
    axios.put(`http://localhost:3000/users/${id}`, { name })
      .then(response => {
        const updatedUsers = users.map(user => 
          user.id === id ? response.data : user
        );
        setUsers(updatedUsers);
      });
  };

  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <p>{user.name}</p>
          <button onClick={() => updateUser(user.id, 'New Name')}>Update</button>
        </div>
      ))}
    </div>
  );
};

export default App;