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

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

React Native - Redux 狀態正在更新,但組件視圖未正確更新

React Native - Redux 狀態正在更新,但組件視圖未正確更新

繁花不似錦 2022-01-13 16:35:52
該應用程序具有以下功能。從主頁上的服務器獲取訂單列表,并以 Reduxorders狀態保存。訂單有各種狀態“未結”、“進行中”、“待處理”、“已完成”、“已取消”。在應用程序中,有一個組件“訂單”。它在選項卡視圖中有 3 個選項卡?!伴_放”、“進行中”和“歷史”。Open 顯示“Open”訂單,Ongoing 顯示“In progress”和“Pending”訂單。歷史記錄顯示“已完成”和“已取消”訂單。每個選項卡組件都處于orders狀態,使用if條件僅顯示應在其下的特定訂單。假設,在服務器端發生了一個動作,并且訂單從“打開”狀態變為“進行中”狀態。預期行為:現在,用戶向下滑動并刷新選項卡組件。刷新時,它應該從服務器獲取訂單更新數據并更新 reduxorders狀態。狀態更新后orders,所有選項卡數據都應自動更新。實際行為:用戶向下滑動并刷新選項卡組件。刷新時,它從服務器獲取訂單更新數據并更新 reduxorders狀態。但是在更新狀態后,組件視圖沒有適當更新。我的意思是,有些部分更新,但有些部分不更新。我想,我沒有在減速器中正確更新狀態。以下是 GET 和 PUT 訂單有效負載的 reducer 代碼。const orders = (state = {}, action)=> {  switch(action.type){    case 'GET_ORDERS':      return action.payload    case 'PUT_ORDERS':{      let newState = state;      if(action.payload != undefined){        action.payload.map(function(order, index){          if(newState[order.id] != undefined) {            newState[order.id].order_status = order.order_status;          } else {            newState[order.id] = order;          }        });      }      return Object.assign({}, state, action.payload);    }  }}我通過將訂單 ID 作為鍵來維護訂單對象的鍵。這是因為,如果新訂單來了就會刷新,不應該重新分配鍵。
查看完整描述

1 回答

?
侃侃爾雅

TA貢獻1801條經驗 獲得超16個贊

你正在改變你的訂單,而不是把它們變成新的對象。即使您的 reducer 狀態正在生成新對象,如果您將組件綁定到 order 對象,它們也不會將這些視為更改。例如,如果您有:


const { connect } = require('react-redux');


export function Order({ orderId, order }) {

  return (

    <div className="order">

      <span className="order-id">{order.id}</span>

      <span className="order-status">{order.order_status}</span>

    </div>

  );

}


const mapStateToProps = ({ orders }, { orderId }) => ({

  order: orders[orderId]

});


export default connect(mapStateToProps)(Order);

...然后order傳遞給您的組件的道具將被識別為同一個對象,并且您的組件不會更新。


嘗試按如下方式更改減速器:


const orders = (state = {}, action)=> {

  switch(action.type){

    case 'GET_ORDERS':

      return action.payload

    case 'PUT_ORDERS': {

      const updates = action.payload.map((payloadOrder, index) => {

        const oldOrder = state[payloadOrder.id];

        const newOrder = oldOrder 

          ? { ...oldOrder, order_status: payloadOrder.order_status }

          : payloadOrder;

        return {

          [payloadOrder.id]: newOrder

        };

      });

      return Object.assign({}, state, ...updates);

    }

  }

}

通過此更改,您所在州的每個已修改的訂單對象都是一個新對象。


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 418 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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