Update key in state when another key is updated

Question

The main idea is based on a shopping cart, when a product is added to the cart (key products) the key orderTotal is updated.

Inside the key products own a object with various products each containing the value, and the total of purchase products: ordered and price, example:

state = {
    products: {
        "a": {
            name: "A",
            price: 2
            ordered: 5
        },
        "b": {
            name: "B",
            price: 5,
            ordered: 2
        }
    },
    orderTotal: 0
}

I tried to put a reduce() inside componentWillUpdate(), but I can’t use this.setState() inside componentWillUpdate() because it generates an infinite loop.

componentWillUpdate () {
    const products = {...this.state.products};
    const orderTotal = Object.keys(products).reduce((sum, next) => {
        return sum + (products[next].ordered * parseFloat(products[next].price));
    }, 0);
    this.setState({ orderTotal }); // Loop infinito.
}

I need every time products is updated, perform a loop by calculating ordered * price and store the sum of everything in orderTotal, what method I can use?

Answer 1

About setState

How data is stored in state of Carrinho, then the best way to activate a new rendering is by using setState of Carrinho. This new rendering will be done as soon as possible, but not immediately... it’s like a setTimeout passing 0.

Important: This means that the state is not changed immediately after the setState call.

That being said, there are two alternatives to changing the state, if more than one change depends on the previous state:

• change everything at once:

  setState({total: valorTotal, partes: valoresDasPartes })
  

• change using callback:

  setState({partes: valoresDasPartes})
  setState((s,p) => {total: s.partes.reduce((a, b) => a + b, 0)})
  

The question that remains is where to use setState?

• A: Inside the callback that Cart passes to the child.

Example

class Carrinho extends React.Component {
  render() {
    var listaProds = []
    for (var n = 1; n < 10; n++)
      listaProds.append(
        <Produto
          nome={"Produto "+n}
          adicionar={p => this.addProd(p, +1)}
          remover={  p => this.addProd(p, -1)}
          />)
     return (
       <div>
         <div>{listaProds}</div>
         <div>Total: {this.state.orderTotal}</div>
       </div>
       )
  }

  addProd(p, quant) {
    // adicionando o produto
    this.setState(function (state) {
        var s = {}
        s.products = state.products
        p = s.products[p.key] = s.products[p.key] || Object.assign({}, p, {ordered: 0})
        p.ordered = Math.max(p.ordered + quant, 0)
        return s
    });
    this.recalculaTotal()
  }

  recalculaTotal() {
    this.setState(function (state) {
        return {
            orderTotal: state.products
                             .map((p) => p.ordered * parseFloat(p.price))
                             .reduce((a, b) => a + b, 0)
        }
    });
  }
}

Answer 2

In the documentation official says this.setState() should not be called within the componentWillUpdate, if you want to update the state when a property is modified you should do this within the method componentWillReceiveProps.

componentWillUpdate() is Invoked immediately before Rendering when new props or state are being Received. Use this as an Opportunity to perform Preparation before an update occurs. This method is not called for the initial render.

Note that you cannot call this.setState() here. If you need to update state in Sponse to a prop change, use componentWillReceiveProps() Instead.