React中使用react-select获取下拉选中值触发TypeError的解决方法

你遇到的报错本质是把原生select的逻辑直接套用到react-select上，叠加了两处逻辑错误触发：

• react-select的onChange回调并不会返回原生DOM事件对象，它的入参直接就是用户选中的单个选项对象（也就是你定义的options数组里的某一项，结构为{value: 'xxx', label: 'xxx'}）。原代码里写的e.target.value，相当于把选中的选项对象当成DOM事件去读它身上不存在的target属性，当读取target的value时自然就抛出了未定义的错误。
• 给Select组件传受控值时写的value={options.value}逻辑不对：options是完整的选项数组，本身根本没有value属性，传进去的受控值是undefined，导致组件的受控逻辑完全跑不通。
• 原代码导入时多余引入了option字段，该字段不是React导出的有效API，属于无效冗余代码。

按照react-select的官方逻辑调整后的完整实现如下：

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

export default function Change() {
  // 先定义选项列表，避免初始化时的暂时性死区报错
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]
  // 状态值匹配选项结构，作为Select的受控值
  const [category, setCat] = useState(options[0]);

  return (
    <>
      <Select
        onChange={(selectedOption) => {
          // 回调入参直接就是选中的选项对象，直接更新状态即可
          setCat(selectedOption);
        }}
        value={category}
        options={options}
      />
      <h1>result = {category.value}</h1>
    </>
  );
}

• 如果不需要存储完整的选项对象，只想单独存选中的value字符串，在onChange里直接写setCat(selectedOption.value)即可，对应的useState初始值要和value字段类型匹配（比如设为'chocolate'），不要初始塞数字类型，否则渲染时也会触发字段读取错误。
• 如果给Select开启多选模式（isMulti），onChange拿到的是所有选中项组成的数组，不要直接读取单个对象的value属性，需要遍历数组提取每个项的value值。
• 混用原生select和react-select的事件逻辑是这类报错的最高发原因，两者的回调机制没有通用性，写代码时要注意区分。

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