首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Apollo客户端中的react-router返回时,React不更新其状态

问题描述:

使用Apollo客户端中的react-router返回时,React不更新其状态。

回答:

在使用Apollo客户端中的react-router时,如果React不更新其状态,可能是由于以下几个原因导致的:

  1. 缓存问题:Apollo客户端使用了缓存来提高性能,如果之前的数据已经被缓存了,那么在返回时可能不会触发组件的重新渲染。可以尝试使用Apollo提供的refetchfetchMore方法来强制刷新数据。
  2. 组件生命周期问题:React组件的生命周期方法中,componentDidUpdate方法只有在组件的props或state发生变化时才会被调用。如果返回时没有触发这些变化,那么组件的状态也不会更新。可以检查组件的生命周期方法,确保在返回时能够正确地更新状态。
  3. 路由配置问题:可能是路由配置不正确导致的。可以检查路由配置文件,确保返回时能够正确匹配到对应的组件。
  4. Apollo客户端配置问题:可能是Apollo客户端的配置问题导致的。可以检查Apollo客户端的配置文件,确保配置正确。

如果以上方法都没有解决问题,可以尝试以下步骤:

  1. 检查网络请求:使用浏览器开发者工具或网络监控工具,检查网络请求是否正常发送和返回数据。
  2. 检查错误日志:查看控制台输出或错误日志,查找是否有相关的错误信息。
  3. 更新依赖版本:检查项目中使用的Apollo、React和react-router等相关依赖的版本,尝试更新到最新版本。

总结:

在使用Apollo客户端中的react-router时,如果React不更新其状态,可以通过检查缓存、组件生命周期、路由配置和Apollo客户端配置等方面来解决问题。如果问题仍然存在,可以进一步检查网络请求和错误日志,并尝试更新依赖版本。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 redux 应用中使用 GraphQL

您需要编写自定义代码来调用服务器接口,解释数据,对进行规范化并将其插入到存储 - 同时跟踪各种错误和加载状态。 在本教程,您将学习如何通过 Apollo Client 来获取和管理数据。...快速启动一个服务端环境 启动一个 redux 脚手架 增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据 获取更多数据 接下来要做 1....现在,我们已经确认服务器运行正常,并返回正确响应,接下来让我们开始构建客户端。 2....客户端正在运行,现在是开始添加 GraphQL 客户端时候了。我们目标是使用 GraphQL 查询,从服务器轻松获取数据并将其呈现在着陆页(HomeView)。 3.... Provider 替换为来自 react-apollo ApolloProvider。

1.9K10

React useEffect中使用事件监听在回调函数state更新问题

很多React开发者都遇到过useEffect中使用事件监听在回调函数获取到旧state值问题,也都知道如何去解决。...首先看一个手动实现简易useEffect事件监听例子import React, { useRef, useState } from 'react'; // "react": "^18.1.0",import...// 再次点击addEventListenerShowCount按钮 eventListener事件回调函数打印state值控制台打印结果如下图片手动实现简易useEffect,事件监听回调函数也会有获取不到...在React函数也是一样情况,某一个对象监听事件回调函数,这个对象相当于全局作用域变量(或者与函数同一层作用域链),在回调函数获取到state值,为第一次运行时内存state值。...而组件函数内普通函数,每次运行组件函数,普通函数与state作用域链为同一层,所以会拿到最新state值。

10.5K60

有哪些值得学习大型 React 开源项目?

它基于 create-react-app 创建,用 react-router 实现路由,用 Redux 实现状态管理,基于 classNames 编写样式,基于 superagent 请求远程数据。...它是一个非常完整 OSS 解决方案。使用 TypeScript + React 编写,并使用 SCSS 编写样式。大多数组件都存在于 components 包。...代码库使用 Flow 进行类型检查,使用 Apollo (GraphQL) 进行数据获取,使用 Redux 进行状态管理,使用 Express 服务器进行服务器渲染,并编写了大量自定义 React Hooks...后端基于 Django 实现,前端基于 TypeScript + React 实现,使用 Emotion 进行样式管理,基于 react-router 实现路由,使用 Redux 进行状态管理。...他后端是 Go 实现使用 Apollo (GraphQL) 进行数据获取,使用 react-router 实现路由,使用 Redux 进行状态管理,Cypress 进行端到端测试,使用 Material

4.5K20

「首席架构师推荐」React生态系统大集合

创建React Native App - 在没有构建配置任何操作系统上创建React Native应用程序,包含或包含Expo Snowflake - 使用Redux,Parse.com,Jest(...,具有热重新加载,动作重放和可自定义UI react-router-redux - 保持react-router和redux同步绑定 redux-form - 使用react-redux保持形状状态高阶组件...- React组件包装器,用于将React与MobX结合使用 MobX教程 10分钟介绍MobX和React 使用MobX管理React应用程序复杂状态 将您应用程序从Redux重构为MobX...脚本,用于更新中继API Apollo 基于GraphQL数据堆栈 阿波罗综合资源 阿波罗官方网站 Apollo GitHub 阿波罗博客 Apollo Slack Apollo工具 react-apollo-redux...- 使用React / Redux构建SoundCloud客户端 soundcloud-react-mobx - 使用React / MobX构建SoundCloud客户端React和Redux

12.3K30

react-03

SPA应用 单页Web应用(single page web application,SPA) 整个应用只有一个完整页面 点击页面链接不会刷新页面, 本身也不会向服务器发请求 当点击链接, 只会做页面的局部更新...路由分类 后台路由: node服务器端路由, value是function, 用来处理客户端提交请求并返回一个响应数据 前台路由: 浏览器端路由, value是component, 当请求是路由...path, 浏览器端前没有发送http请求, 但界面会更新显示对应组件 3....关于url# 1. 理解# '#'代表网页一个位置。右面的字符,就是该位置标识符 改变#触发网页重载 改变#会改变浏览器访问历史 2....Link: 路由链接 属性1: to="/xxx" 属性2: activeClassName="active" 5. react-router基本使用 1).

2.4K30

字节前端面试被问到react问题

当 ref 属性被用于一个自定义类组件,ref 对象将接收该组件已挂载实例作为他 current。当在父组件需要访问子组件 ref 使用传递 Refs 或回调 Refs。...Route> 使用react-router接管了默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。...,异步任务(通常都是业务或获取数据任务)也例外,而为了不将业务或数据相关任务混入React组件,就需要使用其他框架配合管理异步任务流程,如redux-thunk,redux-saga等;Mobx是一个透明函数响应式编程状态管理库...适用observable保存数据,数据变化后自动处理响应操作redux使用不可变状态,这意味着状态是只读,不能直接去修改它,而是应该返回一个新状态,同时使用纯函数;mobx状态是可变,可以直接对进行修改...可以使用自定义事件通信(发布订阅模式)可以通过redux等进行全局状态管理如果是兄弟组件通信,可以找到这两个兄弟节点共同父节点, 结合父子间通信方式进行通信。为什么直接更新 state 呢 ?

2.1K20

封装一个管理 url 状态 hook

所以你必须要安装 react-router 5.x 或者 6.x 版本。但其实很多 React 项目都不一定使用 react-router。...使用这个包,我认为理由有以下几点: 一来是功能强大,支持很多 options 选项,满足我们各类业务需求。 二来它业内也比较成熟,避免重复造轮子。 三来它包体积也很小,没什么负担。...第一个参数为初始状态,第二个参数为 url 配置,包括状态变更切换 history 方式、query-string parse 和 stringify 配置。...react-router 兼容 5.x 和 6.x,其中 5.x 使用 useHistory,6.x 使用 useNavigate。...根据不同 react-router 版本调用不同方法进行更新。 假如是 5.x 版本,调用 useHistory 方法,更新对应状态

1K20

腾讯前端二面常考react面试题总结

如下所示, username没有存储在DOM元素内,而是存储在组件状态。每次要更新 username,就要调用 setState更新状态;每次要获取 username值,就要获取组件状态值。...shouldComponentUpdate:组件接受到新属性或者新状态时候(可以返回 false,接收数据后更新,阻止 render 调用,后面的函数不会被继续执行了) componentWillUpdate... 使用react-router接管了默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。...当函数返回false时候,render()方法执行,组件也就不会渲染,返回true,组件照常重渲染。...此方法就是拿当前props中值和下一次props值进行对比,数据相等返回false,反之返回true。

1.5K40

React 学习路线图 2018版

文中有多处学习资料链接,大家可以通过访问原文来获取 这个 React 学习路线思维导图来源自 Adam Gołąb react-developer-roadmap 。...截止至本文发布,原仓库已经有了中文版,大家可自行选择查阅,由于是 roadmap 聚合类列表,所以翻译方面差异不会很大。 学习路线图 ?...·使用 grid 和 flexbox 为页面布局 iii.JS 基础 ·熟悉语法 ·学习 DOM 基础操作 ·学习 JS 经典机制...PropTypes ○TypeScript ○Flow 8.表单 ○Redux Form ○Formik ○Formsy ○Final Form 9.路由 ○React-Router...之后就会打开思维导图,修改之后上传后更新 README PNG 图片 (需要导出),然后提交 PR 。 提交 PR 以帮助改进 在 issues 中进行讨论想法 帮忙宣传

2.4K41

react高频面试题总结(附答案)

, 为了性能等考虑, 尽量在constructor绑定事件对componentWillReceiveProps 理解该方法当props发生变化时执行,初始化render执行,在这个回调函数里面,...componentWillReceiveProps在初始化render时候不会执行,它会在Component接受到新状态(Props)被触发,一般用于父组件状态更新子组件重新渲染。...页面没使用服务渲染,当请求页面返回body里为空,之后执行js将html结构注入到body里,结合css显示出来;SSR优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少...react-router 实现思想:基于 history 库来实现上述不同客户端路由实现思想,并且能够保存历史记录等,磨平浏览器差异,上层无感知通过维护列表,在每次 URL 发生变化回收,通过配置...容器组件经常是有状态,因为它们是(其它组件)数据源。React-Router路由有几种模式?

2.2K40

美团前端react面试题汇总

页面没使用服务渲染,当请求页面返回body里为空,之后执行js将html结构注入到body里,结合css显示出来;SSR优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少...ownProps 组件通过props传入参数。reducer 到组件经历过程:reducer对action对象处理,更新组件状态,并将新状态返回store。...但在 React 中会有些不同,包含表单元素组件将会在 state 追踪输入值,并且每次调用回调函数,如 onChange 会更新 state,重新渲染组件。...Route> 使用react-router接管了默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。...生命周期中控制更新) vue 在渲染过程中会跟踪每一个组件依赖关系,不需要渲染整个组件树性能不同 react 适合大中型项目 vue 使用中小型项目redux三大原则单一数据源 整个应用

5.1K30

2023 React 生态系统,以及我一些吐槽……

这通常意味着将基于组件状态和副作用凑合在一起,或者使用更通用状态管理库在应用程序存储和提供异步数据。 虽然大多数传统状态管理库非常适合处理客户端状态,但在处理异步或服务器状态时效果不佳。...首先,服务器状态具有以下特点: 以你无法控制或拥有的远程位置持久存储 需要使用异步 API 进行获取和更新 暗示共享所有权,并且可能被其他人在你不知情情况下更改 如果不小心处理,可能会在应用程序变得...它们通常还需要对该数据进行更新、将更新发送到服务器,并使客户端缓存数据与服务器上数据保持同步。...使用它来获取、缓存和修改应用程序数据,同时自动更新用户界面。 Apollo Client 帮助您以经济、可预测和声明式方式组织代码,与现代开发实践一致。...核心 @apollo/client 库提供了与 React 内置集成,而更大 Apollo 社区则维护了与其他流行视图层集成。 应该是用 GraphQL 状态管理最佳选择。

55330

react-router学习笔记

Hash history 不需要服务器任何配置就能运行,但是推荐在实际线上环境中使用。 像这样 ?_k=ckuvup 没用在 URL 是什么?...但我们想全部 history 都能够使用location state,因此我们要为每一个 location 创建一个唯一 key,并把它们状态存储在 session storage 。...}, // ... }) 服务端渲染 服务端渲染与客户端渲染有些许不同,因为你需要: 发生错误时发送一个 500 响应 需要重定向发送一个 30x 响应 在渲染之前获得数据 (用 router...,组件内部 props 参数更新,走是 componentWillReceiveProps ,所以只是从 router 更新了 props。...这种设计思路与 Nestjs 描述性路由具有相同思想 - 在 nodejs ,我们可以通过装饰器,在任意一个 Action 上描述访问 URL: @POST("/api/service") async

2.7K10

前端几个常见考察点整理

React 并不强制要求使用 JSX。当不想在构建环境配置有关 JSX 编译,不在 React使用 JSX 会更加方便。...在回调你可以使用箭头函数,但问题是每次组件渲染都会创建一个新回调。React keys 作用是什么?Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除辅助标识。... )};在集合添加和删除项目,不使用键或将索引用作键会导致奇怪行为。...解答如果您尝试直接改变组件状态React 将无法得知它需要重新渲染组件。通过使用setState()方法,React 可以更新组件UI。另外,您还可以谈谈如何不保证状态更新是同步。...,都是 标签,区别是∶ 是react-router 里实现路由跳转链接,一般配合 使用react-router接管了默认链接跳转行为,区别于传统页面跳转,

1.3K50

hippy-react 三端同构 — 路由

经过分析和实现,无法在 Hippy 中直接使用 react-router-native react-router MemoryRouter,基于纯js实现路由,不需要依赖于 URL,这使得可以应用在...MemoryRouter, 在web中使用 HashRouter 通过 react-router 对多页面进行切换 以下是 hippy react-router 使用方式 import React...三端同构router使用 3.1 使用 react-router 存在问题 react-router 能够在一定层度上解决 hippy 多页面跳转功能,是也存在一些问题 原生切换没有动画,体验与web...一样 无法使用 react-router-transition 动画 原生返回操作,直接回关闭 hippy 项目 Link 使用过程,需要传入 component。...如 goback, push,传递给组件 当组件需要使用react-router 功能,通过 withRouter 高阶组件,向组件注入路由跳转函数 // withRouter 使用方式 //

2.7K51

React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react

react-router4 react-router概览 1、react一个插件库 2、专门用于实现一个SPA应用 3、基于react项目都会用到该库 SPA 1、点击页面链接不会刷新页面,本身也不会向服务器发送请求...2、点击路由链接,只会发生页面局部更新 3、数据通过ajax请求,在前端异步展示 4、整个应用只有一个完整页面,该页面由各种组件构成,页面的切换其实就是不同组件切换,你只需要在配置把不同路由路径和对应组件关联上即可...(param) //替换 history.listen((location)=>{}) React-router使用 文档: https://reacttraining.com/react-router...JS库,不是React插件库 它可以用在react,angular,vue等项目中,但基本与react配合使用 作用:集中式管理react应用多个组件共享状态。...state,自动调用 React Components : 通过Store读取状态并显示;更新状态; dispatch(action):分发(触发)事件 type、data (事件机制) Reducers

21830

React知识图谱

React知识图谱 图片 组件化 状态值:组件内用到,并且会发生更新,一旦状态更新,会引起组件重新渲染。...它可以让你在编写 class 情况下使用 state 以及其他 React 特性。 规则1:不要在循环,条件或嵌套函数调用 Hook, 确保总是在你 React 函数最顶层调用他们。...这个时候,可以考虑使用useReducer了,把state更新规则写在一个reducer函数,这样不仅reducer可以复用,并且组件也没有复杂state修改规则。...recoil状态读写都是Hooks函数,目前没有提供类组件使用方式。 recoil是Facebook开发,可以使用React内部调度机制,这是redux和mobx不支持。...MemoryRouter:把 URL 历史记录保存在内存 (不读取、写入地址栏)。在测试和非浏览器环境很有用,如React Native。

28320

高频react面试题自检

高阶组件:如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。react 高阶组件React 高阶组件主要有两种形式:属性代理和反向继承。...:组件接受到新属性或者新状态时候(可以返回 false,接收数据后更新,阻止 render 调用,后面的函数不会被继续执行了)componentWillUpdate:组件即将更新不能修改属性和状态render...当不需要使用生命周期钩子时,应该首先使用状态函数组件组件内部维护 state ,只根据外部组件传入 props 进行渲染组件,当 props 改变,组件重新渲染。...(注:这里之所以多次 +1 最终只有一次生效,是因为在同一个方法多次 setState 合并动作不是单纯地将更新累加。比如这里对于相同属性设置,React 只会为保留最后一次更新)。...Route> 使用react-router接管了默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。

84910

玩转 React 服务器端渲染

【编者按】React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToString和renderToStaticMarkup...服务器端渲染除了要解决对浏览器环境依赖,还要解决两个问题: 前后端可以共享代码 前后端路由可以统一处理 React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说明...state, action)两个参数,返回一个新 state reducer 函数判断action.type然后处理对应action.payload数据来更新状态树 所以对于整个应用来说,一个 Store...react-router react-router 通过一种声明式方式匹配不同路由决定在页面上展示不同组件,并且通过 props 将路由信息传递给组件使用,所以只要路由变更,props 就会变化,触发组件...然后要把store状态树写入一个全局变量(__INITIAL_STATE__),这样客户端初始化 render 时候能够校验服务器生成 HTML 结构,并且同步到初始化状态,然后整个页面被客户端接管

2.3K80
领券