ReactJS中调用API获取数据后如何填充至input输入框

现有代码存在的问题 #

• useState初始值错误：你将存储用户信息的consumer状态初始化为空数组[]，但实际接口返回的是对象结构，访问数组的username/phone属性必然返回undefined，初始值应改为空对象{}。
• useEffect缺少依赖项：当前useEffect未指定依赖数组，组件每次渲染都会重新触发接口请求，会造成死循环，需要添加空依赖数组[]让接口仅在组件挂载时调用一次。
• 接口请求成功后未更新状态：你仅在请求成功后打印了返回结果，没有调用状态更新函数把数据存入consumer，自然无法填充到输入框。
• onChange事件绑定错误：你直接把状态更新函数getConsumer绑定给输入框的onChange事件，输入内容时会直接用事件对象覆盖整个consumer状态，需要单独编写输入变更处理函数同步对应字段。

修正后完整代码 #

import { useState, useEffect } from 'react';
// 按需导入你的TextField组件、httpClient、url变量

export default function Consumerdetails() {
  // 初始值改为空对象，状态更新函数命名更符合语义
  const [consumer, setConsumer] = useState({});

  useEffect(() => {
    httpClient(url + `/api/consumers`).then((res) => {
      console.log('Success:', res);
      // 把返回的用户数据更新到状态中，根据实际接口返回结构调整，比如如果返回数据在res.data里就写res.data
      setConsumer(res);
    })
    .catch(err => {
      console.log('An error occurred:', err.res);
    });
  // 添加空依赖数组，仅挂载时执行一次
  }, []);

  // 输入框变更处理函数，同步修改对应字段
  const handleChange = (e) => {
    const { name, value } = e.target;
    setConsumer(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div>
      <TextField
        required
        id="outlined-required"
        label="User Name"
        variant="outlined"
        name="username"
        value={consumer.username || ''}
        onChange={handleChange}
      />

      <TextField
        required
        id="outlined-required"
        label="Phone Number"
        variant="outlined"
        name="phone"
        value={consumer.phone || ''}
        onChange={handleChange}
      />
    </div>
  );
}

补充说明 #

输入框的value加了|| ''是为了避免初始状态为undefined时控制台报非受控组件转受控组件的警告。

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