如何解决React Strict Mode 导致多次渲染和未定义的查询数据?
我在一个类项目中使用 React Strict 模式,我遇到了一个问题,即组件会多次渲染,而嵌套组件会多次渲染。我使用路由,这是到目前为止我的组件的结构方式:
-
主要组件
-
主屏幕组件
-
导航栏组件
-
屏幕组件(通过 React Router Switch 控制)
-
-
因此,通过这种方式,单击某些屏幕组件会将您路由到其他屏幕组件。但是,无论 x 是多少,组件似乎都会渲染 2^x 次。例如,我有一个屏幕组件,它似乎呈现 16 次,因为我有一个 console.log
语句可以打印 16 次。
我还使用 Apollo GraphQL 在每个组件中查询我的后端,但在大多数渲染中它返回未定义,这很麻烦,因为我需要在函数中使用该查询数据并为这些组件渲染。我这样构造我的代码:
const RegionViewer = (props) => {
const { currentRegion } = useParams();
const { data,refetch } = useQuery(GET_REGION,{variables: {regionId: currentRegion}});
const [addLandmark] = useMutation(mutations.ADD_LANDMARK);
const { data: subregions } = useQuery(GET_SUBREGIONS_BY_ID,{variables: {regionId: currentRegion}})
const { data: landmarks} = useQuery(GET_LANDMARKS,{variables: {region_id: currentRegion}});
const [input,setInput] = useState("");
const [target,setTarget] = useState({});
console.log(landmarks);
console.log(data);
console.log(subregions);
if (data && subregions && landmarks) {
const region = data.getRegion;
const numSubregions = subregions.getSubregionsById.length;
const updateInput = async (e) => {
const value = e.target.value;
setTarget(e.target);
await setInput(value);
}
const createLandmark = async () => {
console.log(region.landmarks);
if (input == "") {
alert("Please enter a landmark.");
}
else {
const {data} = await addLandmark({variables: {region_id: region._id,landmark: input}})
}
target.value = "";
setInput("");
await refetch();
}
return(<div>...</div>)
}
else return(<></>)
}
因为我查询了多个返回 undefined 多次的内容(每个大约 14 个,以及 2 个已定义的返回),所以我只是将所有内容包装在一个条件语句中。我想知道是否有更好的方法来解决这个问题,同时仍然使用严格模式。我尝试使用通过 useEffect 调用的 lazyQuery,但这似乎没有帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。