Question

我正在尝试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;

我真的无法确定发生了什么。我对React的有限经验告诉我，某个地方的某些值更改后会导致无限循环。

值得注意的是，注释掉<SeasonDataForm>可以使页面正常工作，尽管一半子窗体都消失了。

有什么想法可以解决这个问题吗？

Answer 1

您可以尝试以下

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();

到

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（）”则是有意完成的，

我希望这可以解决您的问题

React-超过最大更新深度/在渲染其他组件时无法更新组件

1 个答案: