Установка значения вact-select Async без добавления дополнительного состояния - PullRequest
0 голосов
/ 09 октября 2019

Я создал функциональный компонент DepartmentSelect, который использует Async реагировать на выбор, чтобы пользователи могли выбрать отдел из раскрывающегося списка. Я хочу передать идентификатор выбранного отдела в реквизит.

У меня есть рабочий пример, но, похоже, я продублировал логику. Я передал обещание в опцию load -ptions реагировать-выбрать и сохраню опции в состоянии. У меня есть идентификатор отдела выбранного отдела в реквизитах DepartmentSelect, и я сохраняю выбранное значение в состоянии.

//... 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;

Код работает. Я удалил несколько ненужных строк, чтобы сделать их короче. Есть ли способ, чтобы я мог иметь такую ​​же функциональность, не сохраняя параметры и значения в состоянии?

Этот вопрос очень похож на Как я могу работать только со значениями в событии и значении реагировать-выбрать onChangeprop?

В приведенном выше вопросе параметры передаются как prop, так что они могут получить выбранный prop без необходимости проверять, были ли сначала загружены опции с сервера. Было бы лучше загрузить опции отдельно и использовать не асинхронный выбор?

Редактировать

Было бы хорошо, если бы я мог передать props.departmentId в качестве значенияprop to Async, но props.departmentId - это строка. Значение prop Async требует одного из параметров в формате

{
  departmentId: string,
  bill_cd: string,
  name: string
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...