反应钩子/渲染困难

Question

我正在使用Next.js打字稿和非常严格的eslint配置。我对您将如何解决这个问题感兴趣。

使用案例： 我想在客户端获取数据。一旦数据在那里，我就想显示它。很简单。

现在问题来了。

如果我将 useEffectHook 放在if(!data)块上方，我会得到"类型错误：filterVaccinationsBy 不是一个函数">

如果我在if(!data)块下使用我的useEffectHook，我会得到"错误：渲染的钩子比上次渲染时多

"。你如何解决这些事情？

谢谢！！

const MyPage: any = (props: { AuthUserInfo: any }) => {
const [vaccinationList, setVaccinationList] = useState<
IVaccination[] | undefined
>(undefined);
const [filter, setFilter] = useState<
"noFilter" | "travel" | "children" | "gratis" | "combination"
>("noFilter");
const { data, error } = useRequest<Vaccinations>(
VACCINATIONS_QUERY,
(query: any) => graphQLClient.request<Vaccinations>(query)
);
const changeFilterOrder = (vaccinations: IVaccination[] | undefined) => {
if (filterOrder === "alphabetical") {
console.log("in alphabetical filtering");
const alphabeticalOrder = vaccinations?.sort((a, b) =>
a.name.localeCompare(b.name)
);
return alphabeticalOrder;
}
if (filterOrder === "chronological") {
console.log("in chronological filtering");
const chronologicalOrder = _.sortBy(vaccinations, [
function (vacc) {
return vacc.vacc_start_weeks;
},
]);
return chronologicalOrder;
}
};
useEffect(() => {
filterVaccinationsBy("noFilter");
}, []);
if (!data) {
return <p>Loading data...</p>;
}
if (error) {
return <p>Error: {JSON.stringify(error)}</p>;
}
const { multivaccination, vaccination } = data;
const mergedList = vaccination.map(
({
id,
name,
description,
vacc_start_weeks,
vacc_start_text,
vaccination_vaccination_plan,
}) => ({
id,
name,
description,
vacc_start_weeks,
vacc_start_text,
vaccination_vaccination_plan,
multivaccinationByMultivaccination: multivaccination
.filter((multivacc) => multivacc.parent_id === id)
.map(({ vaccinations }) => vaccinations),
})
);
const filterVaccinationsBy = (filterBy: string) => {
if (filterBy === "travel") {
setFilter("travel");
const travelVaccinations = mergedList.filter(
(vacc: IVaccination) =>
vacc.vaccination_vaccination_plan[0]?.vaccination_plan &&
vacc.vaccination_vaccination_plan[0]?.vaccination_plan.target_group?.includes(
"travel"
)
);
const correctOrder = changeFilterOrder(travelVaccinations);
setVaccinationList(correctOrder);
}
if (filterBy === "gratis") {
setFilter("gratis");
const gratisVaccinations = mergedList.filter(
(vacc: IVaccination) =>
vacc.vaccination_vaccination_plan[0].vaccination_plan?.dose1_price ===
0
);
const correctOrder = changeFilterOrder(gratisVaccinations);
setVaccinationList(correctOrder);
}
if (filterBy === "children") {
setFilter("children");
const childrenVaccinations = mergedList.filter(
(vacc: IVaccination) =>
vacc.vaccination_vaccination_plan[0].vaccination_plan &&
vacc.vaccination_vaccination_plan[0].vaccination_plan.target_group?.includes(
"children"
)
);
const correctOrder = changeFilterOrder(childrenVaccinations);
setVaccinationList(correctOrder);
}
if (filterBy === "combination") {
setFilter("combination");
const combinationVaccinations = mergedList.filter(
(vacc: IVaccination) =>
vacc.multivaccinationByMultivaccination.length > 0
);
const correctOrder = changeFilterOrder(combinationVaccinations);
setVaccinationList(correctOrder);
}
if (filterBy === "noFilter") {
setFilter("noFilter");
const correctOrder = changeFilterOrder(mergedList);
console.log("1");
setVaccinationList(correctOrder);
console.log("2");
}
};
return (<p>Hey beautiful<p> )

Answer 1

useEffect 不能在 if(！data( 下，因为你的功能组件会在那时返回并且永远不会调用 useEffect。反应文档比我更好地解释了这一点，但你不能做条件钩子！必须始终调用钩子！

我认为你得到"TypeError：filterVaccinationsBy 不是一个函数"，因为 filterVaccinationsBy 在调用时没有定义。将函数声明放在 useEffect 上方，或将其转换为非箭头/标准函数。