如标题所述,我目前收到以下错误:无法更新组件( HomePage
)同时呈现不同的组件( Query
)。
我对 React 还很陌生,即使我认为我知道我正在打破的规则(只在顶层使用钩子(Hook)来保持它们被调用的顺序)我不确定如何实现我的目标'正在尝试另一种方式。
如果我们在后端没有任何采访,目标是 setPreLaunch(true)。这段代码完成了这项工作,但它会引发错误。我尝试将钩子(Hook)作为 Prop 发送到 Interviews 组件并在那里处理它,但遇到了同样的错误。
这是有问题的代码:
import React, { useState } from "react";
import Interviews from "../../components/Interviews";
import Query from "../../components/Query";
import INTERVIEWS_QUERY from "../../queries/interviews/interviews";
import {
Row,
Col,
Button,
InputGroup,
FormControl,
Form,
} from "react-bootstrap";
import Filters from "../../components/Filters";
import jsonp from "jsonp";
import queryString from "query-string";
const HomePage = () => {
const [genre, setGenre] = useState(["Any"]);
const [authorHistory, setAuthorHistory] = useState(["Any"]);
const [preLaunch, setPreLaunch] = useState(false);
const [emailEntered, setEmailEntered] = useState("");
const [emailMessage, setEmailMessage] = useState("");
if (!preLaunch) {
return (
<div>
<Row id="home-banner-container">
<Col md={12}>
{" "}
<h1 id="home-main-heading" className="text-center">
Text
</h1>
<p id="home-sub-heading" className="text-center">
Text
</p>
</Col>
</Row>
<Row>
<Col md={3}>
<Filters
genre={genre}
setGenre={setGenre}
authorHistory={authorHistory}
setAuthorHistory={setAuthorHistory}
/>
<div className="contact-blurb">
Text
</div>
<Button variant="primary" className="contact-blurb-btn">
Contact
</Button>{" "}
</Col>
<Col md={9}>
<Query query={INTERVIEWS_QUERY}>
{({ data: { interviews } }) => {
if (interviews.length < 1) {
setPreLaunch(true);
} else {
setPreLaunch(false);
}
return (
<Interviews
interviews={interviews}
genreFilter={genre}
authorHistoryFilter={authorHistory}
/>
);
}}
</Query>
</Col>
</Row>
</div>
);
} else {
return (
<div>
<Row id="home-banner-container">
<Col md={12}>
{" "}
<h1 id="home-main-heading" className="text-center">
Text
</h1>
<p id="home-sub-heading" className="text-center">
Text
</p>
</Col>
</Row>
<Row>
<Col md={{ span: 6, offset: 3 }}>
<Form
onSubmit={subscribeToNewsLetter}
className="prelaunch-email-form"
>
<InputGroup className="mb-3">
<FormControl
placeholder="Email Address"
aria-label="Email Address"
type="email"
onChange={(e) => setEmailEntered(e.target.value)}
value={emailEntered}
className="prelaunch-email-input"
/>
<InputGroup.Append>
<Button
variant="outline-secondary"
type="Submit"
className="prelaunch-email-btn"
>
Keep Me Updated
</Button>
</InputGroup.Append>
</InputGroup>
<p>{emailMessage}</p>
</Form>
</Col>
</Row>
<Row>
<Col md={3}></Col>
<Col md={9}>
<Query query={INTERVIEWS_QUERY}>
{({ data: { interviews } }) => {
if (interviews.length < 1) {
setPreLaunch(true);
} else {
setPreLaunch(false);
}
return (
<Interviews
interviews={interviews}
genreFilter={genre}
authorHistoryFilter={authorHistory}
/>
);
}}
</Query>
</Col>
</Row>
</div>
);
}
};
export default HomePage;
编辑
这是英雄推荐的带有查询回调的更新主页代码。
const [genre, setGenre] = useState(["Any"]);
const [authorHistory, setAuthorHistory] = useState(["Any"]);
const [preLaunch, setPreLaunch] = useState(false);
const [emailEntered, setEmailEntered] = useState("");
const [emailMessage, setEmailMessage] = useState("");
const onInterviewsReady = (interviews) => {
setPreLaunch(interviews.length < 1);
};
const myQuery = (
<Query
query={INTERVIEWS_QUERY}
onInterviewsReady={(i) => onInterviewsReady(i)}
>
{({ data: { interviews } }) => {
return (
<Interviews
interviews={interviews}
genreFilter={genre}
authorHistoryFilter={authorHistory}
/>
);
}}
</Query>
);
...
这是完整的查询文件:import React from "react";
import { useQuery } from "@apollo/react-hooks";
const Query = ({ children, query, id, onInterviewsReady }) => {
const { data, loading, error } = useQuery(query, {
variables: { id: id },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {JSON.stringify(error)}</p>;
if (onInterviewsReady) {
onInterviewsReady(data.interviews);
}
return children({ data });
};
export default Query;
使用此更新的代码,结果是相同的。一个正常运行的网站,它会抛出与以前相同的错误。
最佳答案
如果访谈是在 Query
内异步获取的,一个简单的解决方法可能是:
onInterviewsReady
到Query
组件 Query
面试准备好后立即调用此回调(useEffect
)Query
,产生警告 HomePage
具有类似 const onInterviewsReady = interviews => setPreLaunch(interviews.length < 1);
的功能并将其传递给 Query
HomePage
):将回调定义包装在 useCallback
中在将其传递给消费组件之前Query
):将传递的回调 Prop 包装在 useRef
中并在效果中调用 ref 的当前值而不是 prop 的值 关于javascript - 收到错误 "Cannot update a component while rendering a different component"。实现我正在尝试的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63365190/