logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

React 应用基于 Context 的状态管理(二)

  • 定义了一个名为current user的对象类型,其中包含id(类型为number),name(类型为stream),和token(类型为string)。
  • 创建了另一个名为os text maru的类型对象来提供数据,其中包含类型为current usercurrent user和设置当前用户的方法set current user
  • 使用create context创建了一个上下文,并配置了其值类型。
  • 准备了useState返回结果的数据结构,第一个为current user,第二个为set current user
  • 通过use 修改了all contacts provider组件的属性值,加入了current userset current user
  • tsx文件中,可以通过useContext钩子访问os text中的current user并使用set current user
  • 登录按钮绑定了log in函数,登录成功后使用set current user方法更新current user状态。
  • 在浏览器中可以测试登陆流程,登录成功后页面头部会显示当前登录用户的姓名。