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 }) {&nbsp; return (&nbsp; &nbsp; <div className="order">&nbsp; &nbsp; &nbsp; <span className="order-id">{order.id}</span>&nbsp; &nbsp; &nbsp; <span className="order-status">{order.order_status}</span>&nbsp; &nbsp; </div>&nbsp; );}const mapStateToProps = ({ orders }, { orderId }) => ({&nbsp; order: orders[orderId]});export default connect(mapStateToProps)(Order);...然后order传递给您的组件的道具将被识别为同一个对象，并且您的组件不会更新。尝试按如下方式更改减速器：const orders = (state = {}, action)=> {&nbsp; switch(action.type){&nbsp; &nbsp; case 'GET_ORDERS':&nbsp; &nbsp; &nbsp; return action.payload&nbsp; &nbsp; case 'PUT_ORDERS': {&nbsp; &nbsp; &nbsp; const updates = action.payload.map((payloadOrder, index) => {&nbsp; &nbsp; &nbsp; &nbsp; const oldOrder = state[payloadOrder.id];&nbsp; &nbsp; &nbsp; &nbsp; const newOrder = oldOrder&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? { ...oldOrder, order_status: payloadOrder.order_status }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : payloadOrder;&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [payloadOrder.id]: newOrder&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; return Object.assign({}, state, ...updates);&nbsp; &nbsp; }&nbsp; }}通过此更改，您所在州的每个已修改的订单对象都是一个新对象。