如何让react-select组件在onChange时更新选中显示状态？

API 探路者

2026-8-5

解决react-select选中后不显示选中内容的问题

你的问题核心是react-select的value属性要求传入完整的选项对象，但你当前把country状态存成了单独的字符串值（比如"Afghanistan"），组件无法匹配到对应的选项条目，所以选中后不会显示内容。

修复步骤：

调整状态存储格式：把country从存字符串改成存整个选项对象
修正选中判断逻辑：让getOptionSelected正确对比选项和选中对象的value值
补全缺失的useState导入（原代码里漏了，必须加上）

修改后的完整代码：

import countries from "../utils/COUNTRIES.json";
import Select from "react-select";
import { useState } from "react";

const EventsPage = () => {
  // 初始值设为null，对应未选中状态
  const [country, setCountry] = useState(null);

  const onCountryChange = (selectedOption) => {
    // 直接存储选中的完整选项对象
    setCountry(selectedOption);
  };

  return (
    <Layout>
      <Select
        name="countries"
        id="countries"
        placeholder="Select a country"
        options={countries}
        onChange={onCountryChange}
        value={country}
        getOptionLabel={(option) => option.value}
        // 正确判断当前选项是否为选中项
        getOptionSelected={(option, selected) => option.value === selected.value}        
      />
    </Layout>
  );
};

export default EventsPage;