Mobx - 更改依赖项列表中的项时不执行 UseEffect 挂钩

问题描述

我是 React 和 Mobx 的新手。

我希望在更改日期时执行下面代码中的 useEffect 钩子。日期变量位于商店内。每当我更改日期时，我都希望我的组件中的 useEffect 执行，但它仅在组件首次初始化时执行。

我将商店添加为 useEfftcts 依赖项列表中的一个项目，但没有运气。任何帮助将不胜感激。

这是我的组件

const TeamDashboard: React.FC<IProps> = ({ teams,teamName,teamSchedule }) => {
  const teamsstore = useContext(Teamsstore);
  const datesstore = useContext(Datesstore);

  let teamIds: number[] = [];

  useEffect(() => {
    teams.map((team) => {
      teamIds.push(team.id);
    });

    teamsstore.loadScheudle(
      teamSchedule,teamIds,datesstore.startDate,datesstore.endDate
    );
  },[datesstore]);

  return (
    <Container></Container>
  );
};
export default observer(TeamDashboard);

这是我的日期商店

class Datesstore {
    @observable startDate: Date = new Date();
    @observable endDate: Date = new Date('2021-04-05');

    @action setStartDate = (event: any,data: any,) => {
        data.value > this.endDate
        ? this.startDate = new Date()
        : this.startDate = data.value === null ? seasonStartDate : data.value;
    }

    @action setEndDate = (event: any,data: any) => {
        console.log(data.value);
        this.endDate = data.value === null ? seasonEndDate : data.value;
    }
}

export default createContext(new Datesstore())

解决方法

我认为您的问题是 datesStore 根本没有改变，对象是相同的，但里面的值正在改变。

您可以尝试像这样更改您的依赖项：

useEffect(()=>{//your function body},[datesStore.startDate,datesStore.endDate]);

,

使用 Mobx 版本 6 中的 makeAutoObservable 并删除 action 和 observables 装饰器，解决了当我的商店中的日期更改时要执行的 useEffect。 下面是我的代码现在是如何设置的。

日期存储

export default class DatesStore {
    startDate: Date = new Date();
    endDate: Date = new Date();

    constructor() {
        this.endDate.setDate(this.startDate.getDate() + parseInt('30'));
        makeAutoObservable(this);
    }

    setStartDate = (event: any,data: any,) => {
        data.value > this.endDate
        ? this.startDate = new Date()
        : this.startDate = data.value === null ? seasonStartDate : data.value;
    }

    setEndDate = (event: any,data: any) => {
        this.endDate = data.value === null ? seasonEndDate : data.value;
    }
}

存储所有存储的根存储和一个自定义钩子以在我的组件中使用存储

interface Store {
    teamsStore: TeamsStore,datesStore: DatesStore
}

export const store: Store = {
    teamsStore: new TeamsStore(),datesStore: new DatesStore()
}

export const StoreContext = createContext(store);

export function useStore() {
    return useContext(StoreContext)
}

有问题的组件

const TeamDashboard: React.FC<IProps> = ({ teams,teamName,teamSchedule }) => {
  const { teamsStore,datesStore } = useStore();

  teams.slice().sort((a,b) => b.points - a.points);
  let teamIds: number[] = [];

  useEffect(() => {
    teams.map((team) => {
      teamIds.push(team.id);
    });

    teamsStore.loadScheudle(
      teamSchedule,teamIds,datesStore.startDate,datesStore.endDate
    );
  },datesStore.endDate]);

  return (
    <Container></Container>
  );
};
export default observer(TeamDashboard);