Question

我正在尝试使我的汉堡包正常工作，不幸的是，我发现了一个我不知道该如何解决或为什么无法正常工作的问题……请注意！！！

该项目的想法是从一组预定义的食材，价格和初始数量开始...在我看来，所有汉堡都必须有生菜和肉类...所以我创建了一个名为ORIGINALBURGER的对象，创建类时，使用构造函数通过克隆原始对象将ORIGINALBURGER分配给状态

问题：我无法使用点差或其他任何方法克隆原始的汉堡对象。每次我更新状态“成分”时，它也会修改我的原始对象...

我想念什么吗？请在下面检查我的代码，并感谢帮助此新手：

        import React, { Component } from "react";
import Aux from "../../hoc/Aux";
import Burguer from "../../components/Burguer/Burguer";
import BuildControls from "../../components/Burguer/BuildControls/BuildControls";

const OriginalIngredients = [
  { PublicName: "Salad", Type: "salad", Quantity: 1, Price: 0.65 },
  { PublicName: "Bacon", Type: "bacon", Quantity: 0, Price: 1.65 },
  {
    PublicName: "American Cheese",
    Type: "cheese",
    Quantity: 0,
    Price: 0.99
  },
  { PublicName: "Meat Patty", Type: "meat", Quantity: 1, Price: 2.65 }
];

class BurguerBuilder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // ---> OPTION B ---> ingredientes: ORIGINALBURGUER.map(a => ({ ...a })),
      ingredientes: [...OriginalIngredients],
      TotalPrice: 0
    };
  }

  render() {
    const { ingredientes } = this.state;

    return (
      <Aux>
        <Burguer ingredients={ingredientes} />
        <BuildControls
          ingredients={ingredientes}
          AddIngredientEvent={this.handleAddIngredient}
          RemoveIngredientEvent={this.handleRemoveIngredient}
          changeAmtEvent={this.handleIngredientChangeAmt}
          ResetIngredientsEvent={this.hanldeResetIngredients}
        />
      </Aux>
    );
  }

  componentDidMount() {
    const TotalBurguerPrice = this.CalculateBurguerPrice();
    this.setState({ TotalPrice: TotalBurguerPrice });
  }

  CalculateBurguerPrice() {
    return 50;
  }

  hanldeResetIngredients = () => {
    const IngredientesOriginales = [...OriginalIngredients];
    this.setState({ ingredientes: IngredientesOriginales });
  };

  handleRemoveIngredient = type => {
    const ingredientes = [...this.state.ingredientes];
    if (ingredientes.find(f => f.Type === type).Quantity > 0)
      ingredientes.find(f => f.Type === type).Quantity--;
    this.setState({ ingredientes });
  };

  handleAddIngredient = type => {
    const ingredientes = [...this.state.ingredientes];
    ingredientes.find(f => f.Type === type).Quantity++;
    this.setState({ ingredientes });
    console.log("state content", this.state.ingredientes);
    console.log("original burger", OriginalIngredients);
  };

  handleIngredientChangeAmt = (evento, tipo) => {
    const ingredientes = [...this.state.ingredientes];
    const ingrediente = ingredientes.find(i => i.Type === tipo);

    if (evento.target.value === "") ingrediente.Quantity = 0;
    else if (evento.target.value >= 0)
      ingrediente.Quantity = evento.target.value;
    else ingrediente.Quantity = 0;

    this.setState({ ingredientes });
  };
}

export default BurguerBuilder;

例如，在名为 hanldeResetIngredients 的方法中，我想将对象的原始版本分配给当前状态，但是当我看到时，状态和原始对象都已更改。感谢您的帮助。

Answer 1

Spread正在创建一个浅表副本，这意味着它将遍历您的数组并复制对该数组中对象的引用，而不是实际复制每个对象。您需要遍历数组并散布每个对象，即：

OriginalIngredients.map( (ingredient) => {
    return {...ingredient}
});

无法在React中克隆对象数组

1 个答案: