使用State Hooks控制React-select value时输入内容不显示的问题

问题概述 #

使用react-select的CreatableSelect组件实现动态新增输入字段时，非受控模式下输入内容正常显示，但通过State Hooks控制value属性后，输入内容完全无法显示。绑定相同state的普通输入框能正常工作，且元素检查发现受控模式下缺少非受控模式生成的额外single value div。

问题原因 #

核心问题在于react-select的value属性要求接收完整的选项对象（包含value和label字段），而非单独的value字符串。你在handleSelection中仅存储了选中值的v.value，导致组件无法识别该值对应的选项结构，因此无法渲染选中内容。此外，初始化selectedOp时用[]作为默认值也不符合组件对未选中状态的预期。

解决方案 #

修正后的完整代码 #

import React, { useState } from "react";
import CreatableSelect from "react-select/creatable";

export function DynamicInputwHooks() {
  const [val, setVal] = useState([]);
  // 初始化选中状态为null数组，代表未选中
  const [selectedOp, setSelectedOp] = useState([]);
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" }
  ];

  const handleAdd = () => {
    const tempVal = [...val, []];
    // 新增字段默认未选中，设为null
    const tempSel = [...selectedOp, null];
    setSelectedOp(tempSel);
    setVal(tempVal);
  };

  const handleSelection = (v, indx) => {
    const tempSel = [...selectedOp];
    // 存储完整的选项对象，而非仅value字段
    tempSel[indx] = v;
    setSelectedOp(tempSel);
  };

  const handleDel = (indx) => {
    const deleteVal = [...val];
    const deletesel = [...selectedOp];
    deleteVal.splice(indx, 1);
    deletesel.splice(indx, 1);
    setVal(deleteVal);
    setSelectedOp(deletesel);
  };

  return (
    <div>
      <button onClick={() => handleAdd()}>Add</button>
      {val.map((data, indx) => {
        return (
          <div key={indx}>
            <CreatableSelect
              isClearable
              options={options}
              placeholder="Placeholder"
              value={selectedOp[indx]}
              onChange={(e) => handleSelection(e, indx)}
            />
            <button onClick={() => handleDel(indx)}>X</button>
          </div>
        );
      })}
    </div>
  );
}

关键修正点 #

• 存储完整选项对象：在handleSelection中直接存入选中的完整对象v，而非仅提取v.value，让react-select能正确识别并渲染选中内容。
• 初始化选中状态为null：新增字段时默认选中状态设为null，符合组件对未选中状态的预期，避免空数组导致的渲染异常。

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