Question

我尝试使用React + Redux实现购物车。我用初始数据表现得很好，当我称之为行动时它并不起作用我的减速机

＆＃13;

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

＆＃13;

动作：

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

并致电disptach

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

状态是不可变的，您不应该在服务的return语句中分配它。而是使用以下内容创建州的副本：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，它会强制清理您的代码。

Answer 2

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

for (i = 2; i <= N; i++) {
  cout << "i = " << i <<endl;
  cout << "t is:" << t << endl;
  //x = (x->next = new myNode(i, t));

  x->next = new myNode(i, t);
  cout << "x->next is:" << x->next << endl;

  x = x->next;
  cout << "x is:" << x << endl;    

 }

React / Redux组件不会重新渲染

2 个答案: