如何解决组件内的 Apollo 状态管理
非常感谢您来到这里。我是 Apollo 和 React 的新手,我一定不理解这里的逻辑,所以请耐心等待
在我的主页 index.js 上,我像这样初始化 Apollo:
export const getStaticProps = async () => {
const apolloClient = initializeApollo();
await apolloClient.query({
query: GET_ALL_COUNTRIES_MAIN,variables: {
offset: 0,limit: 30,},});
return {
props: { initialApolloState: apolloClient.cache.extract() },revalidate: 1,};
};
并调用一个组件 <TotalCountriesMain />
,然后呈现我所有的卡片。这非常有效。
然而在这个组件内部,我想要 fetchMore
以便我的另一个结果附加到旧状态。所以我首先在“index.js”中尝试了它以确保它可以工作,它确实做到了。但是每当我调用里面的 fetchMore 方法时,它都会给我这个错误:
Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
如何防止这种情况发生?
我将向您展示我在下面的组件 TotalCountriesMain
中所做的事情:
const [limit,setLimit] = useState(30);
const { data,error,loading,fetchMore,networkStatus } = useQuery(
GET_ALL_COUNTRIES_MAIN_NEW,{
notifyOnNetworkStatusChange: true,variables: {
offset: 0,limit,}
);
if (!data || !data.globaldatasortednew) return <CircularProgress />;
{data.globaldatasortednew
? data.globaldatasortednew.map((country,index) => {
return (
... // mapping over the cards
)
<Button
onClick={() => {
const currentLength = data.globaldatasortednew.length;
fetchMore({
variables: {
offset: currentLength,limit: 50,}).then((fetchMoreResult) => {
setLimit(
currentLength + fetchMoreResult.data.globaldatasortednew.length
);
});
}}
>
Show more countries
</Button>
我跳过了一些我认为不相关的代码部分。情况是这样的:
每当我单击按钮时,都会出现错误消息。我应该以某种方式听取我的数据的变化吗?我应该创建一个新的状态,例如 const [allCountries,setAllCountries] = useState(initialData);
,然后创建一些函数来设置所有国家吗?这样做时我应该告诉 Apollo 缓存吗?
在这种情况下最好的方法是什么?
感谢您的建议!
解决方法
如评论中所述,您收到错误是因为有条件地呈现某些钩子。
您不能调用 hooks inside loops,conditions,or nested functions,您需要在组件的顶层调用它们。这允许 React 通过确保每次渲染组件时以相同的顺序调用钩子来正确保留钩子的状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。