亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我的復選框不使用 Redux 更新?

為什么我的復選框不使用 Redux 更新?

素胚勾勒不出你 2022-12-22 09:32:39
我正在開發一個使用 Redux 來管理狀態的 React-Native 移動應用程序。我有過濾器來管理顯示的數據。我正在使用 Redux 來管理過濾器中的所有數據。這很簡單:我點擊復選框,它就會被點擊。我再次單擊該復選框(猜猜是什么),它沒有被單擊。當存在值為“allInclusive”的框時,除“allInclusive”以外的所有框均未選中。這是減速器的代碼和復選框的代碼。var comparators = {...state.comparators};      if (!comparators[action.payload.comparator]) {        comparators[action.payload.comparator] = {};        comparators[action.payload.comparator][action.payload.name] = [action.payload.value];      } else {        if (!comparators[action.payload.comparator][action.payload.name]) {          comparators[action.payload.comparator][action.payload.name] = [action.payload.value];        } else {          if (comparators[action.payload.comparator][action.payload.name].includes(action.payload.value)) {            comparators[action.payload.comparator][action.payload.name] = comparators[action.payload.comparator][action.payload.name].filter(value => value !== action.payload.value);          } else {            comparators[action.payload.comparator][action.payload.name].push(action.payload.value);          }        }      }      return Object.assign({}, state, {        comparators,      });
查看完整描述

2 回答

?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

這是重寫為不可變的減速器:


 const { comparators } = state;

  const { comparator, name, value } = action.payload;


  if (!comparators[comparator]) {

    return {

      ...state,

      comparators: {

        [comparator]: {

          [name]: value

        }

      }

    };

  } else {

    return !comparators[comparator][name]

      ? {

          ...state,

          comparators: {

            [comparator]: {

              [name]: value

            }

          }

        }

      : comparators[comparator][name].includes([value])

      ? {

          ...state,

          comparators: {

            [name]: comparators[comparator][name].filter(val2 => val2 !== value)

          }

        }

      : {

          ...state,

          comparators: {

            [comparator]: {

              [name]: [...comparators.comparator.name, value]

            }

          }

        };

  }



查看完整回答
反對 回復 2022-12-22
?
慕沐林林

TA貢獻2016條經驗 獲得超9個贊

您正在改變 reducer 中的狀態,因為您只是復制頂級對象,然后改變嵌套在其中的內容。不可變更新總是需要為對象和數組復制每一層嵌套。

編寫 Redux 邏輯的第一條規則是:不要改變狀態。

您應該改用我們的官方 Redux Toolkit 包。它不僅會捕捉到這些意外突變并警告您,createSliceAPI 還允許您實際編寫“突變”代碼,這些代碼會變成安全、正確的不可變更新。

您還應該花時間閱讀關于“不可變更新模式”的 Redux 文檔頁面,以及 Dave Ceddia 關于React 和 Redux 中不變性的完整指南的帖子。


查看完整回答
反對 回復 2022-12-22
  • 2 回答
  • 0 關注
  • 98 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號