当前位置：首页 > news >正文

react_12

news 来源：原创 2025/5/20 13:28:23

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