React - Превышена максимальная глубина обновления / невозможно обновить компонент при рендеринге другого компонента

Я пробую useFormContext, чтобы отреагировать на обновление формы, добавив еще один раздел. Вот мой код: https://codesandbox.io/s/funny-swanson-fiomq < / а>

Имею следующее:

  • season_form.js - основная форма
  • season_data_form.js - подформа; изначально season_form вызывал только его.
  • challenge_form.js - это новый раздел, также вызываемый season_form.

Моя идея заключалась в том, чтобы убрать хуки формы из season_data_form.js и challenge_form.js, переместить его в season_form.js и использовать useFormContext для передачи информации между ними, например регистров, и отправки действий.

Однако при локальном запуске я продолжаю получать следующую ошибку:

Невозможно обновить компонент (SeasonForm) при визуализации другого компонента (SeasonDataForm).

А потом где-то по ходу дела говорится следующее:

Превышена максимальная глубина обновления

Я не уверен, что выбрать в первую очередь.

Насколько я могу судить, это происходит в season_form.js, всякий раз, когда пользователь пытается загрузить данные в currentSeasonData, изменяя значение seasonIndex:

const SeasonForm = () => {
    const [seasonsData, setSeasonsData] = useState();
    const [seasonIndex, setSeasonIndex] = useState(0);
    const [currentSeasonData, setCurrentSeasonData] = useState(null);

    const formMethods = useForm({ mode: "onBlur" });
    const { register, errors, control, handleSubmit, reset, formState, setError } = formMethods;

    const onSubmit = async (data) => { console.log(data); };

    useEffect((_) => {
        async function fetchData() {
            try {
                let data_seasons = await dbGetSeasons();
                setSeasonsData(data_seasons);
                if (data_seasons[0]) { setSeasonIndex(data_seasons[0].id); }
                // ^^ Comment that out and the page will load, but will crash the moment you select anything in the dropdown.
            } catch (error) {
                console.error(error);
            }
        }

    fetchData();
    }, []);

    useEffect((_) => {
        seasonsData &&
        seasonsData.forEach((data) => {
            if (data.id === seasonIndex) { setCurrentSeasonData(data); }
        });
    },
    [seasonIndex]
    );

    return (
    <Box>
        <Dropdown>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
                {currentSeasonData ? (
                    <> {currentSeasonData.shortname} ({currentSeasonData.name}) </>
                ) : (
                    <>Choose a season...</>
                )}
            </Dropdown.Toggle>

            {seasonsData && (
                <Dropdown.Menu>
                {seasonsData.map((season) => {
                    const seasonKey = "season-" + season.id;
                    return (
                    <Dropdown.Item key={seasonKey} onClick={() => { setSeasonIndex(season.id); }}>
                        {season.shortname} ({season.name})
                    </Dropdown.Item> );
                })}
                </Dropdown.Menu>
            )}
        </Dropdown>

        <Accordion defaultActiveKey="toggle_season">
        <FormProvider {...formMethods}>
            <form onSubmit={handleSubmit(onSubmit)}>
            <Card>
                <Accordion.Toggle as={Card.Header} eventKey="toggle_season">
                <Button variant="link">Season Data and Battle Pass</Button>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="toggle_season">
                <Card.Body>
                    {currentSeasonData ? (<SeasonDataForm seasonData={currentSeasonData} />) : null}
                </Card.Body>
                </Accordion.Collapse>
            </Card>
            <Card>
                <Accordion.Toggle as={Card.Header} eventKey="toggle_challenges">
                <Button variant="link">Challenges</Button>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="toggle_challenges">
                <Card.Body>
                    {currentSeasonData && currentSeasonData.pass_data && currentSeasonData.pass_data.challenges ? (
                        <ChallengeForm challenges={currentSeasonData.pass_data.challenges || {}} />
                    ) : (
                        <Alert variant="danger">Missing `challenges` data</Alert>
                    )}
                </Card.Body>
                </Accordion.Collapse>
            </Card>
            </form>
        </FormProvider>
        </Accordion>
    </Box> );
};

export default SeasonForm;

Я действительно не могу точно определить, что происходит. Мой ограниченный опыт работы с реакцией подсказывает мне, что какое-то значение где-то при изменении вызывает бесконечный цикл.

Следует отметить, что комментирование <SeasonDataForm> позволяет странице работать, хотя половина подчиненных форм отсутствует.

Есть идеи, где я могу это исправить?


reactjs javascript react-hook-form
person zack_falcon    schedule 11.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Можете ли вы попробовать следующее

const methods = useFormContext();
const register = methods.register();
const errors = methods.errors;
const control = methods.control;
const handleSubmit = methods.handleSubmit();
const reset = methods.reset;
const formState = methods.formState;
const setError = methods.setError();
const clearErrors = methods.clearErrors();

to

const methods = useFormContext();
const register = methods.register;
const errors = methods.errors;
const control = methods.control;
const handleSubmit = methods.handleSubmit;
const reset = methods.reset;
const formState = methods.formState;
const setError = methods.setError;
const clearErrors = methods.clearErrors;

Не похоже, что бесконечный цикл взят из ваших SeasonData, но поскольку вы переназначаете функции этим переменным, это не проблема, но проблема в том, что вы не просто переназначаете функции новым переменным, вы выполняют их с помощью (), это отличается от того, что вы получаете результат вызова функции, а не саму функцию таким образом, поэтому я удалил () из всех, кроме useFormContext (), где это в основном сделано намеренно,

Надеюсь, это решит вашу проблему

person Menawer    schedule 11.08.2020
comment
Спасибо за ответ. Я скопировал ваш код, но, несмотря на то, что он избавился от Cannot update a component while rendering a different component, я все еще сталкиваюсь с проблемой Maximum update depth exceeded. Следует отметить, что песочница, похоже, работает с вашим кодом, но она все еще кое-где сломана и не является полной копией кода, который я запускаю локально. Я попробую посмотреть, смогу ли я обновить его, чтобы он стал более похожим. - person zack_falcon; 11.08.2020