反应选择不更新初始选择时选择的值

Question

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

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

  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}