使用React Hooks的react-select（4.3.1）未选择默认值

Question

我正在尝试从所选组件的数据列表中自动选择一个值。请帮忙。 也已经尝试过使用 isLoading 标志。

1. 如果所选值在列表中可用，则自动选择
2. 如果值不可用，那么没问题。

import React, {useEffect, useState} from 'react';
import Select from 'react-select';
import './App.css';

function App() {
  const [selectCity, setSelectCity] = useState(null);
  const [cityOptions, setCityOptions] = useState([]);

  useEffect(() => {
    setSelectCity("Mumbai");
    setCityOptions([{label: "Kolkata", value:"Kolkata"}, {label: "New Delhi", value:"New Delhi"}, {label: "Chennai", value:"Chennai"}, {label: "Mumbai", value:"Mumbai"}])
  }, []);

  const onCitySelect = (e) => {
    console.log("Selected: ", e);
  };
  return (
    <div className="App">
      <Select
        defaultValue={selectCity}
        options={cityOptions}
        onChange={onCitySelect}
        />
    </div>
  );
}

export default App;

Answer 1

请传递对象 "setSelectCity({ label: "Kolkata", value: "Kolkata" });"

import './App.css';
import React, { useEffect, useState } from 'react';
import Select from 'react-select';

const App = () => {

  const [selectCity, setSelectCity] = useState(null);
  const [cityOptions, setCityOptions] = useState([]);

  useEffect(() => {
    setSelectCity({ label: "Kolkata", value: "Kolkata" });
    setCityOptions([{ label: "Kolkata", value: "Kolkata" }, { label: "New Delhi", value: "New Delhi" }, { label: "Chennai", value: "Chennai" }, { label: "Mumbai", value: "Mumbai" }])
  }, []);

  const onCitySelect = (e) => {
    console.log("Selected: ", e);
    setSelectCity(e);
  };

  return (
    <div className="App">
      <h1>Hello MERN !!</h1>
      <Select
        value={selectCity}
        options={cityOptions}
        onChange={onCitySelect}
      />
    </div>
  );
}

export default App;

Answer 2

尝试使用 key 道具

<Select 
defaultValue={selectCity}
options={cityOptions}
onChange={onCitySelect}
key={selectCity}
/>

Answer 3

defaultValue 属性无法动态设置，因此您必须手动设置。请注意，defaultValue 应该是一个包含标签和实际值的对象。

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

function SelectMod() {
  const [selectCity, setSelectCity] = useState(null);
  const [cityOptions, setCityOptions] = useState([]);

  useEffect(() => {
    setCityOptions([
      { label: "Kolkata", value: "Kolkata" },
      { label: "New Delhi", value: "New Delhi" },
      { label: "Chennai", value: "Chennai" },
      { label: "Mumbai", value: "Mumbai" }
    ]);
  }, []);

  const onCitySelect = (e) => {
    console.log("Selected: ", e);
  };

  return (
    <div className="App">
      <Select
        defaultValue={{ label: "Mumbai", value: "Mumbai" }}
        options={cityOptions}
        onChange={onCitySelect}
      />
    </div>
  );
}

export default SelectMod;

const rootElement = document.getElementById("root");
ReactDOM.render(<SelectMod />, rootElement);

或者只是将其设置为默认状态值。

const [selectCity, setSelectCity] = useState({ label: "Mumbai", value: "Mumbai" });

--剪断--

defaultValue={selectCity}

Answer 4

稍后谢谢我..！！

<Select
  placeholder="Select Option"
  defaultValue={data.find(({ value }) => value != your-selected-value)}
  options={data}
  isMulti
/>

Answer 5

<Select defaultValue={{label: selectCity, value: selectCity}} options={cityOptions}/>

它必须与您的选项对象相同。