Question

有一个函数可以将状态为Public Function GetBarcodeAddress(datastring As String, serverName As String) as String GetBarcodeAddress=String.format("http://{0}/barcode/barcode.ashx?data={1}", serverName, datastring) End Function的对象product添加到products

addProductToCart(productId, productName)
{
  var product = {
    id: productId,
    name: productName,
  };

  this.setState({
    products: {
      ...this.state.products,
      [product.id]: product
    }
  });
}

，但是这些对象按[product.id]排序。如何按照它们添加到购物车的顺序对其进行排序？

Answer 1

再维护一个数组ids，您可以在其中添加productId并添加它们：

addProductToCart(productId, productName)
{
  var product = {
    id: productId,
    name: productName,
  };

  this.setState({
    products: {
      ...this.state.products,
      [product.id]: product
    },
    productIds : [...ids, product.id]
  });
}

然后您可以遍历数组以按插入顺序检索产品。

Answer 2

如果您读取this对象是默认键值对，

您有2个选项可以使用@Easwar解决方案，也可以使用数组来存储。就我所见，您可以根据需要使用数组结构。

您应该像这样重组状态

 constructor() {
    super();
    this.addProductToCart = this.addProductToCart.bind(this);
    this.state = {
      products: []
    };
  }

  addProductToCart() {
    productsId--;
    var product = {
      id: productsId,
      name: 'test',
    };   

    this.setState({
      products: [...this.state.products,product]      
    });
  }

Demo

正如我所见，从数组中删除对象时遇到问题，您可以轻松地使用它

removefromCart(value) {

    var array = [...this.state.products]; // make a separate copy of the array
    var index = array.findIndex(a => a.id === value);
    if (index !== -1) {
      array.splice(index, 1);
      this.setState({ products: array });
    }
  }

对状态为[React JS]的对象进行排序或排序

2 个答案: