React/Redux 组件不会重新渲染答案

【问题标题】：React/Redux component does not re-renderReact/Redux 组件不会重新渲染
【发布时间】：2023-03-28 17:33:01
【问题描述】：

我尝试使用 React + Redux 实现购物车。我在初始数据方面表现出色，当我调用操作时它不起作用我的减速机

const initalState = {
      loading: false, 
      currentEmployeeId: 1,
      carts: {
        '1': {
          employee: {
            firstName: 'Ha',
            lastName: 'Nguyen',
            id: 1,
          },
    
          services: {
            '1' :
              {id: 1, name: "Fill In Acrylic" },
            '2':
              {
                id: 2, name: "Fill In Gel Color" }
          }
        },
      },
      customer: {
        firstName: "Thuc",
        lastName: 'Vo',  
        id: 2, 
      },
    }
    
    export default function cart(state = initalState, action) {
      switch (action.type) { 
    
        case RECEIVE_DATA:
          return Object.assign({}, state, {
            loading: false,
          })
    
        case ADD_SERVICE:
          {
            const { currentEmployeeId} = state;
            let service = {
            id: action.service.id,
              name: action.service.name, 
            };    
            return {
              ...state,
              ...state.carts[currentEmployeeId].services[service.id] = service,
              loading: false,
            }
          }   

        default:
          return state;
      }
    }

行动：

export function addService(service){
  return{
    type: ADD_SERVICE,
    service
  }
}

并调用调度

dispatch(addService({id: 76, name: "4 Designs"}))

服务已添加到服务属性，UI 不会重新渲染

   function mapStateToProps(state) {  
      return {    
        carts: state.cart.carts
      };
    }

购物车列表：

员工：员工姓名 1
1.服务名称1
2. 服务名称 2
3.服务名称3

员工：员工姓名 2
4. 服务名称 4
5：服务名称5

更新：

class CartComponent extends Component {

  render() {
    const { carts } = this.props;
    return (    

          <div className="div-table-content">
            <table className="table table-condensed table-hover table-striped table-scroll table-customer-referral">
              <tbody>
                {
                  <Carts carts={carts} />
                }
              </tbody>
            </table>
          </div>       
    );
  }
}

export default CartComponent;


class CartContainer extends Component {

  render() {    
    return (
      <CartComponent carts={this.props.carts} />
    );
  }
}

function mapStateToProps(state) {
  return {
    carts: state.cart.carts
  };
}

export default connect(
  mapStateToProps,
  null
)(CartContainer);

【问题讨论】：

您能否提供您的组件的代码，以便我们知道发生了什么？如果 ui 没有重新渲染，可能你没有使用 mapStateToProps 函数到你的组件
函数 mapStateToProps(state) { return { carts: state.cart.carts }; } 导出默认连接（mapStateToProps，null）（CartContainer）；
能否也添加 CartContainer 组件代码？
CartContainer 连接到 redux 存储

标签： javascript reactjs redux react-redux

【解决方案1】：

状态是不可变的，您不应在服务的返回语句中分配它。相反，使用 Object.assign({}, obj) 创建状态副本或使用 JSON.parse(JSON.stringify(obj)) 创建深层副本

这应该有效：

  const newService = {
    [action.service.id]: { // dynamic object
      id: action.service.id,
      name: action.service.name,
    }
  };

  // deep clone the carts object
  const carts = JSON.parse(JSON.stringify(state.carts));
  // assign the newService to the clone
  Object.assign(carts[currentEmployeeId].services, newService);

  return { // add it to new state
    ...state, carts, loading: false,
  };

你的数据结构很难使用，你应该避免使用数字作为键来保存像[action.service.id]这样的技巧。

尝试使用类似的东西：

const initalState = {
  loading: false,
  currentEmployeeId: 1,
  carts: {
    employee: {
      firstName: 'Ha',
      lastName: 'Nguyen',
      id: 1,
    },
    services: [
      { id: 1, name: 'Fill In Acrylic' },
      { id: 2, name: 'Fill In Gel Color' },
    ],
  },
  customer: {
    firstName: 'Thuc',
    lastName: 'Vo',
    id: 2,
  },
};

由于您的对象中有id，因此您可以轻松检索您要查找的对象。

另外，你应该尝试集成在 create-react-app 中的 eslint，它会强制清理你的代码。

【讨论】：

它不起作用。服务不会添加到新状态。我应该把数据结构做得更好吗？
你的权利，Object.assign({}, obj) 没有像JSON.parse(JSON.stringify(obj)) 那样创建深层副本，我的旧代码修改了旧状态。我更新了我的答案，如果有帮助请点赞:)

【解决方案2】：

我的解决方案：我也需要复制子属性，使用扩展运算符

export default function cart(state = initalState, action) {
      switch (action.type) { 
    
        case RECEIVE_DATA:
          return Object.assign({}, state, {
            loading: false,
          })
    
        case ADD_SERVICE:
          {
            const { currentEmployeeId} = state;
            let service = {
            id: action.service.id,
              name: action.service.name, 
            };  
  
           return {
          ...state,
          carts:{
            ...state.carts,
            [currentEmployeeId]:
            {
              ...state.carts[currentEmployeeId],
                services:{
                  ...state.carts[currentEmployeeId].services,
                  [service.id]: service
                }              
            }
          }         
        }

          }   

        default:
          return state;
      }
    }

【讨论】：