（反应）如何根据动态键入的其他字段的计算结果更新输入字段

Question

So I have this problem, banging my head to the wall for the last several days, where I have a simple form, there might be more than one divs with four inputs but they are all related to each other. What I'm trying to do is to calculate the last input's in a div value which is based on the rest of the inputs' value and are typed dynamically and then to setState() to return a new state. I have handler functions (to add, remove or change value of input fields) which work when I don't need to handle this particular update. Now here's the code:

class App extends React.Component {

  state = {
      bank: 10,
      totalPrice: 0,
      hands: [
          {
              name: "hand1",
              backPrice: 0,
              bankPrice: 0,
              commision: 0,
              realPrice: 0
          }
      ],
      handCount: 1
  };

  componentDidUpdate(prevProps, prevState) {
    const hands = this.state.hands;

    // initialized variables needed to calculate a result
    const totalPrice = hands.reduce((total, hand) => {
        return (hand.backPrice || 1) * total;
        }, 1);

    // lastHandPrice is ALWAYS needed, it is the base of the rest of calculations
    const lastHandPrice = (this.state.bank * totalPrice) /
        (hands[hands.length - 1].bankPrice -
        (hands[hands.length - 1].commision / 100));

    const newHands = hands.reduceRight(
        // calculation starts in reverse, with the first value being lastHandPrice
        // it returns an array of number values reversed again to be in correct order
        (newHands, hand, ind, array) => {
            let prevHand = array[ind + 1];
            let prevPrice = newHands[array.length - ind - 2];
            if (hand == array[array.length - 1]) {
                return newHands.concat(lastHandPrice)
            } else {
                return newHands.concat(
                    prevPrice * (1 - (prevHand.commision / 100)) /
                    (hand.bankPrice - (hand.commision / 100))
                )
            }
        }, []
    ).reverse();


    if (this.state.hands !== prevState.hands)
        this.setState({
            totalPrice: totalPrice,
            hands: this.state.hands.map((hand, index) => {
                return Object.assign(hand, {realPrice: newHands[index]})
            })
        })
}

There are four main input fields in a div, represented in state.hands . So this code works just perfect in my terminal but react throws me a Maximum update depth exceeded error when I try the following:

• Add a new hand to the array

• Try to enter anything in the input

There's nothing more I can really do about it. I tried a few other methods to achieve this, but I always get the same error. It seems like some kind of loop starts to work but I just can't figure it out. Why it won't let me to update state.hands ?

Input change/add/or remove handlers are very predictable, just updating the needed value, adding a div of four input fields, and removing the selected div. To change the value I map() over the state.hands and then Object.assign() the property value I need to the object I need (hand1, hand2, etc).

EDIT (the rest of the code):

handleInputChange = (event) => {
    const handName = event.currentTarget.parentNode.getAttribute("name");
    const handInput = event.currentTarget.getAttribute("name");
    const value = event.currentTarget.value;
    if (handInput === "bank" || handInput === "totalPrice") {
        this.setState({
            [handInput]: value
        });
    } else {
        this.setState(prevState => ({
            hands: prevState.hands.map(
            hand => {
                if (hand.name === handName) {
                    return Object.assign(hand, { [handInput]: value })
                } else {
                    return hand
                }
            }),
        }));
    }
}

handleAddHand = () => {
    const handCount = this.state.handCount;
    const name = `hand${handCount + 1}`;
    const hand = {
        name,
        backPrice: 0,
        bankPrice: 0,
        commision: 0,
        realPrice: 0
    };
    this.setState(prevState => ({
        hands: prevState.hands.concat({...hand}),
        handCount: prevState.handCount + 1
        })
    );
}

handleRemoveHand = (event) => {
    const handName = event.currentTarget.parentNode.getAttribute("name");
    const handIndex = this.state.hands.findIndex(hand => 
        hand.name === handName);
    this.setState(prevState => ({
        hands: [
            ...prevState.hands.slice(0, handIndex),
            ...prevState.hands.slice(handIndex + 1)
        ]
    }));
}
render() {
    const listHands = this.state.hands
        .map(hand =>
            <HandInputs
                key={hand.name}
                name={hand.name}
                backPrice={hand.backPrice}
                bankPrice={hand.bankPrice}
                commision={hand.commision}
                realPrice={hand.realPrice}
                handleChange={this.handleInputChange}
                removeHand={this.handleRemoveHand}
            />
    );

    return (
        <div>
            <input
                name="bank"
                value={this.state.bank}
                onChange={this.handleInputChange}
            />
            <input
                name="totalPrice"
                value={this.state.totalPrice}
                onChange={this.handleInputChange}
            />
            {listHands}
            <button onClick={this.handleAddHand}>Add Hand</button>
        </div>
    );
}


function HandInputs(props) {
    return (
        <div name={props.name}>
            <input type="text" value={props.backPrice}
              name="backPrice" onChange={props.handleChange} />
            <input type="text" value={props.bankPrice}
              name="bankPrice" onChange={props.handleChange} />
            <input type="text" value={props.commision}
              name="commision" onChange={props.handleChange} />
            <input type="text" value={props.realPrice}
              name="realPrice" onChange={props.handleChange} />
            {props.name !== "hand1" && 
              <button onClick={props.removeLeg}>Remove leg</button>}
        </div>
    );
}

Answer 1

Because you call setState in componentDidUpdate it makes the component go over the update life cycle again and call componentDidUpdate in a loop. Your check: if (this.state.hands !== prevState.hands) will always be true because you always create a new hands array in state:

this.setState({
   totalPrice: totalPrice,
   hands: this.state.hands.map((hand, index) => { <-- always cause a new array
      return Object.assign(hand, {realPrice: newHands[index]})
   })
})

One solution for this is to use the callback function as the second argument to setState . This callback will be called after the change of the state and inside it you can use the state as you used it in componentDidUpdate .

// the same function as your componentDidUpdate
afterStateChange = () => {
   const hands = this.state.hands;

   // initialized variables needed to calculate a result
   ...

   // you can call `setState` here (you don't need to check if the state is different from prevState
   this.setState({
       totalPrice: totalPrice,
       hands: this.state.hands.map((hand, index) => {
          return Object.assign(hand, { realPrice: newHands[index] });
       })
   });

And then for example you can use it here:

  handleAddHand = () => {
    const handCount = this.state.handCount;
    const name = `hand${handCount + 1}`;
    const hand = {
      name,
      backPrice: 0,
      bankPrice: 0,
      commision: 0,
      realPrice: 0
    };
    this.setState(
      prevState => ({
        hands: prevState.hands.concat({ ...hand }),
        handCount: prevState.handCount + 1
      }),
      this.afterStateChange <-- here
    );
  };