Я создал функциональный компонент 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
}