React中Select组件提交返回[object Object]问题求助

问题1：表单提交返回[object%20Object],[object%20Object],... #

你提交时拿到的是React元素数组的序列化结果，因为你可能误把渲染用的Categorie元素数组当成了表单数据。React元素本质是对象，直接序列化就会变成[object Object]。

解决核心是单独维护选中值的状态，而非直接操作渲染元素：

• 新增状态跟踪选中的分类值
• 提交表单时直接使用这个状态值

问题2：手动指定cates[0].name导致页面空白 #

组件初始化时cates是空数组，此时cates[0]为undefined，访问undefined.name会抛出JS错误，直接导致组件渲染失败，页面空白。

解决方式是添加数据存在性判断，或者用可选链操作符避免报错：

• 用cates[0]?.name替代cates[0].name
• 或者判断cates.length > 0后再访问数组元素

完整修正代码 #

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

function CategorySelectForm() {
  // 分类列表状态
  const [cates, setCates] = useState([]);
  // 选中的分类值状态
  const [selectedCate, setSelectedCate] = useState('');

  // 获取分类数据
  useEffect(() => {
    const getCates = async () => {
      const res = await axios.get("http://localhost:8080/api/categories");
      setCates(res.data);
    };
    getCates();
  }, []);

  // 监听选择变化
  const handleSelectChange = (e) => {
    setSelectedCate(e.target.value);
  };

  // 表单提交逻辑
  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里拿到的就是选中的分类名称
    console.log('选中的分类:', selectedCate);
    // 后续提交到后端的逻辑...
  };

  return (
    <form onSubmit={handleSubmit}>
      <select value={selectedCate} onChange={handleSelectChange}>
        <option value="" hidden>Choisissez une catégorie</option>
        {/* 遍历必须加key，符合React列表渲染规范 */}
        {cates.map((cate) => (
          <option key={cate.id || cate.name} value={cate.name}>
            {cate.name}
          </option>
        ))}
      </select>
      <button type="submit">提交</button>
    </form>
  );
}

关键细节说明 #

• 用selectedCate状态专门跟踪选中值，提交时直接取用，彻底避免[object Object]问题
• 遍历分类时添加key属性，这是React列表渲染的强制要求，能避免性能警告和渲染异常
• 初始化时cates为空数组，map遍历空数组返回空，不会触发渲染错误；如果需要提前访问单个分类，记得用cates[0]?.name这种容错写法

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