reactjs - 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())
解决方案
利用 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.startDate, datesStore.endDate]);
return (
<Container></Container>
);
};
export default observer(TeamDashboard);
推荐阅读
- python - 对于页面上没有显示尺寸的产品,如何在csv中输出“无产品尺寸”?(python,网络抓取)
- amazon-redshift - 对 redshift 中的列使用 dist 键时数据将如何分布
- javascript - setTimeout(function() 在 javascript 中不起作用
- c# - 在 Target 之外访问 PropertyGroup
- javascript - 将复选框和输入框值附加到 html 表
- c# - 不在单引号内时匹配的正则表达式
- javascript - 将数组的每个元素写入文件的新行的最佳方法是什么?
- javascript - 使用 socket.io、react.js 和 node.js 进行实时通知
- mysql-workbench - 从 MySQL Workbench 恢复或访问工作区
- java - 使用 Docker 桥接网络时无法在集成测试中获取 JDBC 连接