在React Router 6的action方法中获取react-select多选值的问题

React-Select多选返回的是对象数组，而表单默认只能传递字符串，这是你遇到[object Object]或只能拿到单个值的核心原因。下面提供两种可行的解决方案：

方法1：序列化选中值到隐藏输入框 #

组件代码 #

import { useState } from 'react';
import Select from 'react-select';
import { Form } from 'react-router-dom';

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
];

export default function MyForm() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleSelectChange = (selected) => {
    setSelectedOptions(selected);
  };

  return (
    <Form method="post">
      <Select
        isMulti
        options={options}
        onChange={handleSelectChange}
        value={selectedOptions}
      />
      {/* 用隐藏输入框存储序列化后的选中值 */}
      <input
        type="hidden"
        name="selectedItems"
        value={JSON.stringify(selectedOptions)}
      />
      <button type="submit">SAVE</button>
    </Form>
  );
}

Action函数代码 #

export async function action({ request }) {
  const formData = await request.formData();
  const selectedItemsStr = formData.get('selectedItems');
  
  // 解析序列化字符串为对象数组，处理空值避免报错
  const selectedItems = selectedItemsStr ? JSON.parse(selectedItemsStr) : [];
  
  // 现在可以正常访问每个选项的value和label
  console.log(selectedItems); // 输出如 [{value: 'react', label: 'React'}, ...]
  
  // 后续业务逻辑处理
  return { selectedItems };
}

方法2：使用useSubmit手动构建FormData提交 #

组件代码 #

import { useState } from 'react';
import Select from 'react-select';
import { useSubmit } from 'react-router-dom';

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
];

export default function MyForm() {
  const [selectedOptions, setSelectedOptions] = useState([]);
  const submit = useSubmit();

  const handleSelectChange = (selected) => {
    setSelectedOptions(selected);
  };

  const handleSave = () => {
    const formData = new FormData();
    // 序列化对象数组后存入FormData
    formData.append('selectedItems', JSON.stringify(selectedOptions));
    submit(formData, { method: 'post' });
  };

  return (
    <div>
      <Select
        isMulti
        options={options}
        onChange={handleSelectChange}
        value={selectedOptions}
      />
      <button onClick={handleSave}>SAVE</button>
    </div>
  );
}

Action函数代码（与方法1一致） #

export async function action({ request }) {
  const formData = await request.formData();
  const selectedItemsStr = formData.get('selectedItems');
  
  const selectedItems = selectedItemsStr ? JSON.parse(selectedItemsStr) : [];
  
  console.log(selectedItems);
  // 后续业务逻辑处理
  return { selectedItems };
}

关键注意事项 #

• 始终记得React-Select多选返回的是对象数组，必须先序列化为JSON字符串才能通过表单传递
• 解析时要判断字符串是否为空，避免JSON.parse抛出错误
• 两种方案本质都是字符串化传递+解析，可根据你的组件结构选择合适的方式

内容的提问来源于stack exchange，提问作者D. Rattansingh