react_12

在异步操作里为状态属性赋值，需要放在 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被重新渲染) */} <Input onChange={(e) => { StudentStore.setName(e.target.value); }} ></Input> <Search style={{ 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);