React更新分类项时Axios请求返回数据在文本输入框显示undefined的解决方法

我来帮你排查这个问题，从你的代码来看，主要有几个关键点没处理好，咱们一步步调整就能解决：

1. 初始状态不匹配接口返回类型 #

你现在把data的初始值设成了[]（数组），但从请求的接口路径api/admin/category/${category_id.id}来看，这应该是获取单个分类详情，接口返回的应该是一个对象，而不是数组。直接用数组去绑定输入框的属性（比如data.name），数组没有name属性，自然会显示undefined。

修改初始状态为空对象：

const [data, setData] = useState({});

2. useEffect依赖项缺失 #

你的useEffect依赖数组是空的[]，但里面用到了category_id.id这个路由参数。如果路由参数发生变化（比如从其他页面跳过来），useEffect不会重新执行请求，导致数据没更新。另外，也建议加上错误捕获，方便排查请求失败的情况：

const { id } = useParams(); // 直接解构id，代码更清晰
useEffect(() => {
  axios.get(`api/admin/category/${id}`)
  .then(res => {
    console.log('接口返回数据：', res.data); // 先确认接口返回的结构是否符合预期
    setData(res.data);
  })
  .catch(err => {
    console.error('请求分类数据失败：', err); // 捕获错误，排查网络或接口问题
  })
}, [id]); // 把id加入依赖，确保参数变化时重新请求

3. 处理异步数据的渲染时机 #

React状态更新是异步的，初始时data是空对象，直接绑定输入框会出现undefined。有两种处理方式：

方式一：使用可选链操作符（推荐） #

在绑定属性时用?.来避免访问undefined的属性：

<input 
  type="text" 
  {...register('name')} 
  defaultValue={data?.name} 
/>

方式二：条件渲染，等数据加载完成再渲染表单 #

如果需要更严谨的加载状态，可以先判断数据是否存在，再渲染表单：

{Object.keys(data).length > 0 ? (
  <form onSubmit={handleSubmit(updateCategory)}>
    <input type="text" {...register('name')} defaultValue={data.name} />
    {/* 其他分类字段 */}
    <button type="submit">更新分类</button>
  </form>
) : (
  <div>加载中...</div>
)}

4. 确认接口返回的数据结构 #

别忘了在then里打印res.data，看看接口返回的是不是你预期的格式。有些接口会把数据包裹在data字段里（比如res.data.data），这时候你需要调整成setData(res.data.data)才能拿到正确的分类数据。

按照上面的步骤调整后，应该就能解决data显示undefined的问题了。

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