如何使用 Immer 调试 UI 状态?
How do you debug UI state using Immer?
我有一个调用 handleApplyFiltersButtonClick 的按钮,它通过对某些数据应用过滤器来更新状态。我在某处有一个错误。我正在努力调试使用 Immers 产品的状态,因为一切都是代理或函数。我宁愿不使用 Immer,但这是团队的选择。
从文档看来,生产者函数通常采用当前状态,并且带有传递给我们的参数 draft 的函数会进行状态更改并进行记录……不过这里没有这样做。
如何查看更新状态?由于 console.log('nextState', nextState) 导致只是一个没有信息的函数。
handleApplyFiltersButtonClick = () => {
const nextState = produce((state) => {
state.page = 1;
state.appliedFilters = { ...state.filters };
state.filteredHealthProviders = this.getFilteredHealthProviders(state.healthProviders, state.appliedFilters)
})
console.log('nextState', nextState)
this.setState(
nextState,
);
};
当您将一个函数作为 produce
的第一个参数传递时,将创建一个 producer,这是一个创建 draft 你传递给它的任何值,并将该草稿传递给你的 produce
回调。
如果您关心 return 值,则需要使用传递给 setState
的函数包装生产者。
handleApplyFiltersButtonClick = () => {
const producer = produce((state) => {
state.page = 1;
state.appliedFilters = { ...state.filters };
state.filteredHealthProviders = this.getFilteredHealthProviders(state.healthProviders, state.appliedFilters);
})
this.setState(
state => {
const nextState = producer(state);
console.log('nextState', nextState);
},
);
};
我有一个调用 handleApplyFiltersButtonClick 的按钮,它通过对某些数据应用过滤器来更新状态。我在某处有一个错误。我正在努力调试使用 Immers 产品的状态,因为一切都是代理或函数。我宁愿不使用 Immer,但这是团队的选择。
从文档看来,生产者函数通常采用当前状态,并且带有传递给我们的参数 draft 的函数会进行状态更改并进行记录……不过这里没有这样做。
如何查看更新状态?由于 console.log('nextState', nextState) 导致只是一个没有信息的函数。
handleApplyFiltersButtonClick = () => {
const nextState = produce((state) => {
state.page = 1;
state.appliedFilters = { ...state.filters };
state.filteredHealthProviders = this.getFilteredHealthProviders(state.healthProviders, state.appliedFilters)
})
console.log('nextState', nextState)
this.setState(
nextState,
);
};
当您将一个函数作为 produce
的第一个参数传递时,将创建一个 producer,这是一个创建 draft 你传递给它的任何值,并将该草稿传递给你的 produce
回调。
如果您关心 return 值,则需要使用传递给 setState
的函数包装生产者。
handleApplyFiltersButtonClick = () => {
const producer = produce((state) => {
state.page = 1;
state.appliedFilters = { ...state.filters };
state.filteredHealthProviders = this.getFilteredHealthProviders(state.healthProviders, state.appliedFilters);
})
this.setState(
state => {
const nextState = producer(state);
console.log('nextState', nextState);
},
);
};