使用 React Hooks 的 react-select (4.3.1) 未选择默认值答案

【问题标题】：Default value is not selected with react-select (4.3.1) using React Hooks使用 React Hooks 的 react-select (4.3.1) 未选择默认值
【发布时间】：2021-08-08 10:40:21
【问题描述】：

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

如果所选值在列表中可用，则自动选择
如果值不可用，则没有问题。

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;

【问题讨论】：

标签： reactjs react-hooks react-select

【解决方案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;

【讨论】：

【解决方案2】：

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}

【讨论】：