如何使用Immer調試UI狀態？

Question

我有一個調用handleApplyFiltersButtonClick的按鈕，該按鈕通過將過濾器應用於某些數據來更新狀態。 我在某處有一個錯誤。 我正在努力調試使用Immers生產的狀態，因為一切都是代理或函數。 我寧願不使用Immer，但這是車隊的選擇。

從文檔看來，生產者函數通常采用當前狀態，並且將帶有參數草稿的函數傳遞給該狀態，然后進行狀態更改並記錄下來……盡管這里不這樣做。

如何查看更新狀態？ 由於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,
    );
};

Answer 1

當你傳遞一個函數作為第一個參數produce ， 生產者被創建，它是創建您傳遞給它的任何值的草案，並將該草案對你的函數produce回調。

如果您關心返回值，則需要使用傳遞給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);
    },
  );
};