Блог

У меня есть поле автозаполнения MaterialUI с некоторыми вызовами из API. Рядом с этим полем у меня есть кнопка, которая вызывает API для обновления параметров (для загрузки новых, если некоторые из них были созданы). Но каким-то образом все остальные поля сбрасываются до начальных значений. Я знаю это, потому что, когда я делаю это, редактируя существующий экземпляр, а не создавая новый, поля остаются такими, какими они пришли с сервера. Кроме того, я протестировал вызов API без обновления состояния параметров. Даже после простого ожидания значения формы вызова axios очищаются.

Вот ввод автозаполнения:

 <FastField
    name="club"
    options={clubs}
    optionsLoading={clubsLoading}
    shouldUpdate={(next, prev) =>
        shouldFastFieldRerender(next, prev, getIn)
    }
>
    {() => (
        <FormField.AutoComplete
            label="Клуб"
            name="club"
            value={values.club}
            setFieldValue={setFieldValue}
            setTouched={setFieldTouched}
            touched={touched.club}
            errors={errors.club}
            options={clubs}
            disabled={clubsLoading}
            selectionDisabled={clubsLoading}
        />
    )}
</FastField>
 

И вот кнопка рядом с ним:

 <IconButton
    type="button"
    className={classNames(
        classes.btn,
        classes.reloadButton
    )}
    onClick={fetchClubs}
>
    <ReplayIcon />
</IconButton>
 

Функция выборки:

 const fetchClubs = React.useCallback(async () => {
    const clubs = await getClubs();

    setClubs(clubs);
}, [getClubs]);
 

Поэтому , даже если я прокомментирую функцию setClubs и сделаю только await getClubs() это, форма все равно будет сброшена