中国电力建设集团有限公司网站网站优化西安

在异步操作里为状态属性赋值，需要放在 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);