javascript - React/Redux 组件不重新渲染

Question

我尝试使用 React + Redux 实现购物车。我用初始数据表现得很好，当我调用操作时它不起作用我的 reducer

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);

Answer 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，它会强制清理您的代码。