React Native - Redux 状态正在更新，但组件视图未正确更新

Question

该应用程序具有以下功能。从主页上的服务器获取订单列表，并以 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 作为键来维护订单对象的键。这是因为，如果新订单来了就会刷新，不应该重新分配键。

Answer 1

你正在改变你的订单，而不是把它们变成新的对象。即使您的 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);

    }

  }

}

通过此更改，您所在州的每个已修改的订单对象都是一个新对象。