使用useState设置react-select的defaultValue不渲染问题求助

return (<Select />)

我尝试给react-select的

return (<Select />)

当前实现代码 #

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

export default function AnimatedMulti() {
  const [values, setValues] = useState([]);
  const [defaultValues, setDefaultValues] = useState([]);

  useEffect(() => {
    const data = [
      { value: 1, label: "Label 1" },
      { value: 2, label: "Label 2" },
      { value: 3, label: "Label 3" }
    ];

    setValues(data);
    setDefaultValues([data[0], data[1]]);
  }, []);

  return (
    <Select
      closeMenuOnSelect={false}
      defaultValue={defaultValues}
      isMulti
      options={values}
    />
  );
}

实际情况 #

组件渲染后没有显示任何默认选中项：

预期效果 #

希望Select组件能渲染出两个默认选中的选项。

解决方法 #

问题出在defaultValue的特性上：它是非受控组件的属性，只会在组件首次渲染时生效。你的代码中，defaultValues初始值是空数组，组件已经完成第一次渲染后，useEffect才执行并更新defaultValues，此时defaultValue不会再读取新的状态值。

方案1：改用受控组件模式（推荐） #

使用value绑定状态，配合onChange更新选中值，这是react-select处理动态数据选中的常规方式：

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

export default function AnimatedMulti() {
  const [options, setOptions] = useState([]);
  const [selectedValues, setSelectedValues] = useState([]);

  useEffect(() => {
    const data = [
      { value: 1, label: "Label 1" },
      { value: 2, label: "Label 2" },
      { value: 3, label: "Label 3" }
    ];

    setOptions(data);
    setSelectedValues([data[0], data[1]]);
  }, []);

  return (
    <Select
      closeMenuOnSelect={false}
      value={selectedValues}
      onChange={setSelectedValues}
      isMulti
      options={options}
    />
  );
}

方案2：等待数据加载完成后再渲染组件 #

如果坚持使用非受控模式，可以通过加载状态，确保组件在默认值和选项都准备好后再渲染：

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

export default function AnimatedMulti() {
  const [options, setOptions] = useState([]);
  const [defaultValues, setDefaultValues] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const data = [
      { value: 1, label: "Label 1" },
      { value: 2, label: "Label 2" },
      { value: 3, label: "Label 3" }
    ];

    setOptions(data);
    setDefaultValues([data[0], data[1]]);
    setIsLoaded(true);
  }, []);

  if (!isLoaded) return null;

  return (
    <Select
      closeMenuOnSelect={false}
      defaultValue={defaultValues}
      isMulti
      options={options}
    />
  );
}

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