背景: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 中进行数据的回显和修改。
- 在 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;
- 在用户列表中的每个用户项上添加一个点击事件,调用
handleOpenModal
函数,并将对应的用户数据传递给它。
const UserList: React.FC = () => {
// ...
return (
<div>
{users.map((user) => (
<div key={user.id} onClick={() => handleOpenModal(user)}>
{user.name}
</div>
))}
</div>
);
};
- 在 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;
- 在 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。