Question

我正在制作一个网络应用程序，人们可以点击鸡尾酒并更改配方，以获得更多或更少的每种成分。我这样做是首先从API端点加载饮料数据库，然后对于数据库中的每个饮料我创建一个具有属性＆＃34;饮料＆＃34;设置为定义饮品名称和配方的JSON对象。

每个孩子都有一个按钮来弹出一个模态，该模态有一个buttongroup来调整每个成分的数量。我这样做是通过将饮料配方作为属性传递给模态，然后将该配方从道具复制到状态。

然后当有人调整饮料配方时（他们可以选择＆＃39;低＆＃39;常规＆＃39;或者＆＃39;高＆＃39;对于每种成分我称之为课程功能传递配方列表中成分的索引的模态和用于乘以原始配方的常量。

在函数中我设置了一个等于props.recipe的临时配方，然后我将该因子乘以成分的原始数量。然后我通过调用this.State

将已被因子修改的临时配方复制到状态

但正在发生的事情似乎是改变了props.recipe以及state.recipe。

为什么会这样？我没想到道具被允许改变。

其次，有更好的方法吗？我是新手，这是我的第一个网络应用程序。在其最简单的形式中，我只想限制每种成分的减少/增加量，但仍然可以让最终用户更改它。

Here is a screenshot with the console open所以你可以看到之前的＆＃39;和＆＃39;之后＆＃39;虽然原来的数量是3，但它被改变了它是6，我击中了'＆＃39;高＆＃39;按钮使原料的成分加倍，但是如果我再次点击它会使它再次加倍而不是停留在6（这是存储在道具中的原始成分量的2倍）。

以下是模态的代码：

import React from 'react';
import ReactDOM from 'react-dom';

import {Modal, ButtonGroup, Button, Table} from 'react-bootstrap';

export default class DrinkInfo extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      recipe: props.drink.recipe,
    };

    console.log('Drink Info Initial Recipe is');
    console.log(this.props);
  }

  adjustAmount(ingredient, level){

    console.log('before change')

    var tempRecipe = this.props.drink.recipe;

    console.log(tempRecipe)

    tempRecipe[ingredient].amount = level * tempRecipe[ingredient].amount;
    //tempRecipe[ingredient].amount = level * this.props.drink.recipe[ingredient].amount;

    console.log('after change')
    console.log(tempRecipe)


    this.setState({ recipe: tempRecipe});
  }

  render(){

    const drinkName = this.props.drink.drink;
    //console.log(this.state.recipe)

    const recipeTableBody = this.state.recipe.map((di, value) => {
      //console.log(di.ingredient);
      return( 
        <tr key = {di.ingredient}>
          <td>{value}</td>
          <td>{di.ingredient}</td>
          <td>{di.amount}</td>
          <td>
            <ButtonGroup>
              <Button onClick={() => this.adjustAmount(value, 0.5)}> Low </Button>
              <Button onClick={() => this.adjustAmount(value, 1)}> Regular </Button>
              <Button onClick={() => this.adjustAmount(value, 2)}> High </Button>
            </ButtonGroup>
          </td>
        </tr>
      );
    });

    //{console.log('Creating Info Modal for: ' + this.props.drink.drink)}


    const recipeTable = (
      <Table striped bordered condensed hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Ingredient</th>
            <th>Amount</th>
            <th>Adjust</th>
          </tr>
        </thead>
      <tbody>
        {recipeTableBody}
      </tbody>
      </Table>
    )

    return(
      <div>
        <Modal show={this.props.show} onHide={this.props.onHide} bsSize="large" aria-labelledby="contained-modal-title-sm">
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-sm"> {this.props.drink.drink} </Modal.Title>
          </Modal.Header>
          <Modal.Body>

            <h4> {this.props.drink.drink} Recipe </h4>

            {recipeTable}

          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.onHide}>Close</Button>
          </Modal.Footer>
        </Modal>

      </div>
    );
  }

}

Answer 1

正如有人提到的那样，尽量让未来的问题更短，更简洁。这样可以更容易伸出援助之手。

那就是说，我想我在adjustAmount()函数中发现了你的问题。

看看：

adjustAmount(ingredient, level){
  var tempRecipe = this.props.drink.recipe;
  tempRecipe[ingredient].amount = level * tempRecipe[ingredient].amount;
  this.setState({ recipe: tempRecipe});
}

您正在this.props.drink.recipe并将其设置为tempRecipe。由于recipe是一个对象，因此基本上会在tempRecipe创建对该对象的引用。换句话说，tempRecipe === recipe。

这意味着，当您更改tempRecipe时，您也正在更改recipe。虽然严格来说React不应该让你改变道具，但它并没有任何冻结它们的东西。 JavaScript是JavaScript，所以它可以让你。

你应该做的是克隆this.props.drink.recipe，然后使用克隆。

adjustAmount(ingredient, level){
  var tempRecipe = Object.assign({}, this.props.drink.recipe);
  tempRecipe[ingredient].amount = level * tempRecipe[ingredient].amount;
  this.setState({ recipe: tempRecipe});
}

这将assign()来自recipe的所有属性，并将它们分配给新对象，从而有效地克隆它。

重要提示：Object.assign({}, someObj)只会创建一个浅层克隆。如果您的对象是多层深度，而不是Object.assign()，则应该获取或创建深度克隆对象。

只需获取其中一个，然后执行以下操作：

adjustAmount(ingredient, level){
  var tempRecipe = deepClone(this.props.drink.recipe);
  tempRecipe[ingredient].amount = level * tempRecipe[ingredient].amount;
  this.setState({ recipe: tempRecipe});
}

其中有很多，所以我不会在这里重新实施它们。有几个拥有它们的库是lodash，下划线，或者NPM中有一些独立的库。

改变状态导致道具改变

1 个答案: