react_12

news/2024/11/7 16:38:39/

在异步操作里为状态属性赋值,需要放在 runInAction 里,否则会有警告错误

使用 store,所有使用 store 的组件,为了感知状态数据的变化,需要用 observer 包装,对应着图中 reactions

import { Input } from "antd";
import StudentStore from "../store/StudentStore";
import { observer } from "mobx-react-lite";
import {runInAction} from 'mobx'
import A71 from "./A71";
import A72 from "./A72";
import Search from "antd/es/input/Search";
/* export default */ function A7() {//   function onChange(e: React.ChangeEvent<HTMLInputElement>) {}//如果觉得上面的写法复杂,可以写成下面的形式 <Input onChange={(e)=>{}}></Input>,e就代表事件对象return (<>{/* e.target.value就代表文本框里面输入的值,当在文本框里面输入内容之后,数据已经存入到了StudentStore里面了,页面的数据并没有同步变化,这是因为A7组件并没有感知到StudentStore里面数据的变化,函数组件并没有重新被调用,要想A7感知到store里面数据的变化,需要借助observer方法,使用observer方法之后,就不默认导出A7而是使用export default observer(A7),这样observer函数就能观察到A7内store里面数据的变化,数据变化之后,它就会重新调用A7,observer就对应着Reactions(状态数据发送改变后要执行的操作,这里执行的操作是P7被重新渲染)*/}<InputonChange={(e) => {StudentStore.setName(e.target.value);}}></Input><Searchstyle={{ width: 150 }}placeholder="请输入编号"onSearch={(v) => {StudentStore.fetch(Number(v));}}></Search><h1>组件0:{StudentStore.student.name} {StudentStore.displayName}</h1><h1>组件0: {StudentStore.displayName}</h1><h1>组件0: {StudentStore.displayName}</h1><A71></A71><A72></A72></>);
}
export default observer(A7);


http://www.ppmy.cn/news/1195647.html

相关文章

基于RK3568的新能源储能能量管理系统ems

新能源储能能量管理系统&#xff08;EMS&#xff09;是一种基于现代化技术的系统&#xff0c;旨在管理并优化新能源储能设备的能量使用。 该系统通过监测、调度和控制新能源储能设备来确保能源的高效利用和可持续发展。 本文将从不同的角度介绍新能源储能能量管理系统的原理、…

windows server 2016调优

1. 增加TCP连接的最大数量&#xff1a; 在您当前的注册表路径&#xff08;HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters&#xff09;中的右侧窗格&#xff0c;右击空白处&#xff0c;选择“新建” -> “DWORD (32位) 值”。为新的值命名为TcpNu…

按顺序输出三个数

解题关键&#xff1a;每次比较后明析数的大小关系 #include<stdio.h> //按大小顺序输出 int main() {int a,b,c,t0;scanf("%d%d%d",&a,&b,&c);if(a>b){ta;ab;bt;//a<b}if(a>c)//c<a<bprintf("由小到大依次输出为&#xff1a…

数据库实验3

-- 实验3 # 1. 嵌套查询 # # &#xff08;1&#xff09;在stuinfo表中查找与“刘东阳”性别相同的所有学生的姓名、出生日期。 select 姓名, 出生日期 from stuinfo where 性别 (select 性别from stuinfowhere 姓名 刘东阳); # &#xff08;2&#xff09;使用IN查找所修课程编…

react使用react-sortable-hoc实现拖拽

react-sortable-hoc拖拽 安装 npm install react-sortable-hoc --save 代码如下&#xff08;示例&#xff09;&#xff1a; import React, { useImperativeHandle, forwardRef, memo, useState } from react;import { DrawerForm } from ant-design/pro-form;import { messag…

【TS篇三】类、函数、for-of循环、类型推断

文章目录 一、类1.1 基本示例1.2 继承1.3 实例成员访问修饰符1.3.1 public 开放的1.3.2 private 私有的1.3.3 protected 受保护的1.3.4 readonly 只读的1.3.5 在参数中使用修饰符 1.4 属性的存&#xff08;get&#xff09;取&#xff08;set&#xff09;器1.5 静态成员 二、函数…

rhcsa-vim

命令行的三种模式 将ets下的passwd文件复制到普通用户下面 编辑模式的快捷方式 a--光标后插入 A--行尾插入 o--光标所在上一行插入 O--光标所在上一行插入 i--光标前插入 I--行首插入 s--删除光标所在位然后进行插入模式 S--删除光标所在行然后进行插入 命令模式的快捷…

成人听力筛查的现状

作者&#xff1a;兰明&#xff0c;医学硕士&#xff0c;听力学博士&#xff0c;听觉健康门诊主任。 你有听力障碍吗&#xff1f;你的家人有听力障碍吗&#xff1f;如果有人提出这样的问题&#xff0c;你的回答多数都是“真不知道”。为什么&#xff1f; 因为我们缺乏成人…