React小项目：如何从JSON Server获取数据填充HTML表单？

1. 先确保 JSON Server 正常运行 #

如果还没启动 JSON Server，先执行以下步骤：

• 安装依赖：npm install -g json-server
• 启动服务：npx json-server --watch db.json（假设你的 JSON 数据文件是 db.json）

2. React 组件核心代码实现 #

用 React 的状态钩子和副作用钩子完成数据获取与表单绑定：

import { useState, useEffect } from 'react';
// 用 fetch 无需额外安装，想用 axios 可以先执行 npm install axios
// import axios from 'axios';

function DataForm() {
  // 初始化表单状态，结构和你的 JSON 数据对应
  const [formData, setFormData] = useState({});

  useEffect(() => {
    // 异步获取数据，接口地址根据你的 JSON Server 配置调整
    const fetchFormData = async () => {
      try {
        // 用 fetch 的写法
        const res = await fetch('http://localhost:3000/your-data-key/1');
        const data = await res.json();
        
        // 用 axios 的写法
        // const res = await axios.get('http://localhost:3000/your-data-key/1');
        // const data = res.data;
        
        setFormData(data);
      } catch (err) {
        console.log('数据获取失败:', err);
      }
    };

    fetchFormData();
  }, []); // 空依赖确保仅组件挂载时执行一次

  // 统一处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form>
      {/* 以下示例根据你的表单界面调整，name 属性必须和 JSON 数据的键名一致 */}
      <div>
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={formData.name || ''}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>年龄：</label>
        <input
          type="number"
          name="age"
          value={formData.age || ''}
          onChange={handleInputChange}
        />
      </div>
      {/* 其他表单字段依此类推 */}
    </form>
  );
}

export default DataForm;

3. 关键注意点 #

• 接口路径要和 JSON Server 的数据结构匹配：比如你的数据存在 users 数组里，单条数据接口就是 http://localhost:3000/users/1
• 输入框的 name 属性必须与 JSON 数据的键完全一致，否则无法正确绑定状态
• 处理空数据情况：用 || '' 避免输入框显示 undefined
• 如果需要填充多条数据（比如列表选后填充），可以通过路由参数、下拉选择等方式确定要获取的具体数据 ID

内容的提问来源于stack exchange，提问作者Nattachai