Question

我已经构建了一个功能部件DepartmentSelect，它使用react-select Async来允许用户从下拉列表中选择一个部门。我想在道具中传递所选部门的ID。

我有一个可行的示例，但似乎我有重复的逻辑。我将一个承诺传递给loadOptions react-select道具，然后将选项存储在状态中。我在DepartmentSelect道具中具有所选部门的DepartmentId，并且正在将所选值存储在状态中。

//... imports and getOptionLabel removed for brevity

const getOptionValue = (option) => {
  return option.id;
};

interface Props {
  departmentId: string,
  onChange: (number) => void
}

let options = [];

const DepartmentSelect = (props: Props) => {
  const [value, setValue] = useState(
    options.find(o => o.id == props.departmentId)
  );
  const [isLoading, setLoading] = useState(true);

  const handleChange = (option, action) => {
    const id = option && option.id;
    setValue(options.find(o => o.id == id));
    props.onChange(id);
  };

  const loadOptions = () => {
    return ky.get('/sbm/departments.json')
      .then(r => r.json())
      .then(json => {
        options = json;
        setValue(options.find(o => o.id == props.departmentId));
        setLoading(false);
        return json;
      });
  };

  return (
    <AsyncSelect
      defaultOptions
      getOptionValue={getOptionValue}
      loadOptions={loadOptions}
      onChange={handleChange}
      value={value}
    />
  );
};

export default DepartmentSelect;

代码正在运行。我删除了一些不相关的行以使其更短。有没有一种方法可以在不将选项和值存储在状态下的情况下具有相同的功能？

这个问题与 How can I work with just values in react-select onChange event and value prop?

在上面的问题中，选项作为属性传递，因此它们可以获取选定的属性，而不必首先检查是否已从服务器加载了选项。分别加载选项并使用非异步选择会更好吗？

修改

如果我可以将props.departmentId作为值prop传递给Async，那就好了，但是props.departmentId是一个字符串。 Async的值属性需要以下选项之一，格式为

{
  departmentId: string,
  bill_cd: string,
  name: string
}

在反应选择异步中设置值，而无需添加额外状态

0 个答案: