【React+AntD+Ts】本地JSON回显

背景：React+Typescript+Ant Design5项目。
目的：在本地读取JSON数据来模拟后端接口，并且在打开Modal时能回显数据，能修改数据。

使用静态 JSON 文件

在项目的 public 文件夹下创建一个 data 文件夹，并在其中创建一个 data.json 文件，用于存储模拟的后端数据。例如：

{
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "john@example.com"
    },
    {
      "id": 2,
      "name": "Jane Smith",
      "email": "jane@example.com"
    }
  ]
}

在需要使用数据的组件中，使用 fetch 或 axios 等工具来读取 JSON 文件并将数据存储在组件的状态中。例如：

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

const UserList: React.FC = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/data/data.json')
      .then((response) => response.json())
      .then((data) => setUsers(data.users));
  }, []);

  // 显示用户列表
  // ...

  return <div>{/* 用户列表代码 */}</div>;
};

export default UserList;

在打开 Modal 时，将对应的用户数据传递给 Modal 组件，并在 Modal 中进行数据的回显和修改。

可以通过以下步骤将对应的用户数据传递给 Modal 组件，并在 Modal 中进行数据的回显和修改。

1. 在 UserList 组件中，创建一个状态来存储当前选中的用户数据，并创建一个函数来更新选中的用户数据。

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

const UserList: React.FC = () => {
  const [users, setUsers] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);

  useEffect(() => {
    fetch('/data/data.json')
      .then((response) => response.json())
      .then((data) => setUsers(data.users));
  }, []);

  const handleOpenModal = (user) => {
    setSelectedUser(user);
    // 打开 Modal
  };

  // 显示用户列表
  // ...

  return <div>{/* 用户列表代码 */}</div>;
};

export default UserList;

2. 在用户列表中的每个用户项上添加一个点击事件，调用 handleOpenModal 函数，并将对应的用户数据传递给它。

const UserList: React.FC = () => {
  // ...

  return (
    <div>
      {users.map((user) => (
        <div key={user.id} onClick={() => handleOpenModal(user)}>
          {user.name}
        </div>
      ))}
    </div>
  );
};

3. 在 Modal 组件中，接收传递过来的用户数据，并在表单中回显用户数据。

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

const UserModal: React.FC = ({ user, onClose }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  useEffect(() => {
    if (user) {
      setName(user.name);
      setEmail(user.email);
    }
  }, [user]);

  const handleSave = () => {
    // 保存修改后的数据
    // ...

    onClose();
  };

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={handleSave}>Save</button>
      <button onClick={onClose}>Cancel</button>
    </div>
  );
};

export default UserModal;

4. 在 UserList 组件中，添加一个状态来控制 Modal 的显示和隐藏，并在打开 Modal 时将选中的用户数据传递给 Modal 组件。

import React, { useEffect, useState } from 'react';
import UserModal from './UserModal';

const UserList: React.FC = () => {
  const [users, setUsers] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    fetch('/data/data.json')
      .then((response) => response.json())
      .then((data) => setUsers(data.users));
  }, []);

  const handleOpenModal = (user) => {
    setSelectedUser(user);
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setSelectedUser(null);
    setShowModal(false);
  };

  // 显示用户列表
  // ...

  return (
    <div>
      {/* 用户列表代码 */}
      {showModal && <UserModal user={selectedUser} onClose={handleCloseModal} />}
    </div>
  );
};

export default UserList;

这样，当用户点击列表中的某个用户时，会打开 Modal 并将对应的用户数据传递给 Modal 组件，在 Modal 中可以回显和修改用户数据。当用户点击保存按钮时，会保存修改后的数据并关闭 Modal。