React-Select onChange报错：Cannot read properties of undefined (reading 'value')

错误原因 #

你遇到的Cannot read properties of undefined (reading 'value')错误，是因为react-dropdown-select组件的onChange回调参数并非标准DOM事件对象（没有target属性）。开启multi多选模式时，该组件的onChange会直接返回选中的选项数组，而非事件对象，所以你尝试访问option.target.value自然会报错。

修复步骤 #

1. 修正onChange逻辑：直接将回调返回的选中选项数组赋值给value状态即可
2. 可选：适配后端数据格式：如果后端只需要选中的value字段集合，可以在提交时对数组做映射处理

修改后的完整代码 #

import React, { useState, useEffect } from 'react'
import Select from 'react-dropdown-select';
import axios from 'axios';

function App() {

  const [data, setData] = useState([]);
  const [value, setValue] = useState([]);
  const [message, setMessage] = useState("");

   const handleSubmit = (event) => {
    event.preventDefault();
    // 如果后端需要纯value数组而非包含label的对象数组，可做如下处理
    const selectedValues = value.map(item => item.value);
    console.log("Selected values:", selectedValues);
    axios.post("./getEmployeeData", {
      value: selectedValues, // 或者直接传value，根据后端需求调整
    }).then((response) => {
      console.log(response);
    }).catch((error) => {
      console.log(error);
    });
  };

  useEffect(() => {
    fetch("/listEmployees")
      .then((response) => response.json())
      .then((employee) => {
        const parsed = JSON.parse(employee.employeeData);
        const employees = Object.entries(parsed).map(([key, value]) => ({
          label: value,
          value: value
        }));

        setData(employees);
        console.log(parsed, employees);
      });
  }, []);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Select
          name="select"
          options={data}
          multi
          // 直接将选中的选项数组赋值给value状态
          onChange={(selectedOptions) => setValue(selectedOptions)}
        />

        <button type="submit">提交</button>
        <div className="message">{message ? <p>{message}</p> : null}</div>
      </form>
    </div>
  )
}

export default App;

额外说明 #

• 该组件的onChange参数在多选模式下是选中选项的数组，单选模式下是单个选项对象，使用前可确认组件文档的回调参数格式
• 提交时的传参格式请根据后端接口要求调整，若后端接受完整的选项对象数组，直接传递value即可

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