react-select 未更新初始 select 上的 selected 值

Question

你可以找到下面的例子来查看我的问题： codesandox example

如果我设置对象的名称属性，它就可以正常工作。但它在我的应用程序的其他示例中不起作用：

  setRegion(item.name);

应用示例：

我的 usestate 看起来像这样：

 const [department, setDepartment] = useState("");

这是我的应用示例：

                      <div className="sui-search-box">
                        <div className="department">
                            <label>
                              Department:
                              <Select id="depart" value={department} onChange={selectedValue => 
                                {
                                setDepartment(selectedValue.value);
                                setFilter("department", selectedValue.value, "any")
                              }}
                              options = {
                                results.map((depart, index) => {
                                  return {
                                    label: depart.name,
                                    value:depart.name,
                                    key:index
                                  }
                                })
                              }
                              />
                              {department}
                              </label> 
                          </div>
                     </div>

设置状态的正确方法是什么？为什么我当前的沙箱没有正确绑定？

Answer 1

value类型必须与onChange回调的第一个参数相同：

value={region}
onChange={(item) => {
  console.log(item);

  // set item instead of item.value
  setRegion(item);
}}

完整代码：

<Select
  value={region}
  onChange={(item) => {
    console.log(item);

    setRegion(item);
  }}
  options={guests.map((guest, index) => {
    return {
      label: guest.name,
      value: guest.name,
      key: index
    };
  })}
/>
{region.value}

Answer 2

import ReactDOM from "react-dom";

import "./styles.css";
import "./Department";
import React, { useState } from "react";
import Select from "react-select";

function App() {
  const guests = [
    {
      name: "Kait",
      plus: true,
      plusName: "Kitty"
    },
    {
      name: "Séanin",
      plus: true,
      plusName: "Guest"
    }
  ];

  const [region, setRegion] = useState("");

  return (
    <>
      <Select
        value={region}
        onChange={(item) => {
          console.log(item);

          setRegion(item.value.plusName);
        }}
        options={guests.map((guest, index) => {
          return {
            label: guest.name,
            value: guest,
            key: index
          };
        })}
      />
      {region}
    </>
  );
}

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

问题是无论您将什么设置为选项，您都会在项目中获得相同的选项。

因此，我不只是存储名称，而是将完整的 guest 对象存储在 option.value 中，并相应地从 item.value.<feild>.

中读取它

react-select 未更新初始 select 上的 selected 值

react-select not updating selected value on initial select

reactjs

react-select