如何解决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;
我真的无法确定发生了什么。我对React的有限经验告诉我,某个地方的某些值更改后会导致无限循环。
值得注意的是,注释掉<SeasonDataForm>
可以使页面正常工作,尽管一半子窗体都消失了。
有什么想法可以解决这个问题吗?
解决方法
您可以尝试以下
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()”则是有意完成的,
我希望这可以解决您的问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。