React中使用react-windowed-select获取选中值时出现未定义属性错误

我使用的react-windowed-select组件能正常渲染，但选中选项时会触发错误：Cannot read properties of undefined (reading 'value')，相关代码如下：

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);
  const [e2, setE2] = useState(null);

  console.log(e2 + " Seleccionado");

  useEffect(() => {
    (async () => {
      const req = await fetch(
        `https://witalenco.com.co/apiWittytalent/dyc/titulos/carreras.php`
      );
      const getres2 = await req.json();
      console.log({ getres2 });
      setUniversidad(await getres2);
    })();
  }, []);

  // 转换选项格式
  const options = t4t.map((item) => ({
    label: item.carrera,
    value: item.id_titulos
  }));

  const handlecountrye2 = (event) => {
    setE2(event.target.value);
  };

  return (
    <div>
      <div class="col-12">
        <br />

        <WindowedSelect
          options={options}
          onChange={handlecountrye2}
          value={e2}
          name="e2"
        />
      </div>
    </div>
  );
}
export default App;

问题原因 #

react-windowed-select的onChange回调参数并非原生DOM事件对象，而是直接返回选中的选项值（或完整选项对象），因此尝试访问event.target.value会报错——这里的event本身就是选中的值/对象，不存在target属性。

解决方案 #

1. 修改回调函数逻辑
   直接使用回调参数作为选中值更新状态：

   const handlecountrye2 = (selectedValue) => {
     setE2(selectedValue);
   };
   

   若需要获取完整选项对象（包含label和value），可以这样处理：

   const handlecountrye2 = (selectedOption) => {
     setE2(selectedOption.value);
     // 如需label可调用selectedOption.label
   };
   

2. 统一状态初始值类型
   接口返回的id_titulos为数字类型，建议将e2的初始值设为undefined（而非null），避免组件初始渲染时出现值类型不匹配的问题：

   const [e2, setE2] = useState(undefined);
   

修改后的完整代码 #

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);
  const [e2, setE2] = useState(undefined);

  console.log(e2 + " Seleccionado");

  useEffect(() => {
    (async () => {
      const req = await fetch(
        `https://witalenco.com.co/apiWittytalent/dyc/titulos/carreras.php`
      );
      const getres2 = await req.json();
      console.log({ getres2 });
      setUniversidad(getres2);
    })();
  }, []);

  const options = t4t.map((item) => ({
    label: item.carrera,
    value: item.id_titulos
  }));

  const handlecountrye2 = (selectedValue) => {
    setE2(selectedValue);
  };

  return (
    <div>
      <div className="col-12">
        <br />

        <WindowedSelect
          options={options}
          onChange={handlecountrye2}
          value={e2}
          name="e2"
        />
      </div>
    </div>
  );
}
export default App;

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