Вопрос по reactjs, javascript – Слишком много рекурсии при обновлении состояния в реакции

4

В этом примере, когда я пытаюсь обновить состояние во времяcomponentDidUpdate обратный вызов жизненного цикла, я получаюtoo much recursion ошибка. Как мне обновлять состояние?

import React from 'react';

class NotesContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { listOfShoppingItems: [] };
  }

  componentDidUpdate(nextProps, nextState) {
    let newShoppingItems = this.calculateShoppingItems();
    this.setState({ listOfShoppingItems: newShoppingItems });
  }

  calculateShoppingItems() {
    let shoppingItemsCart = []

    if (this.props.milk < 3) {
      let value = "Buy some milk";
      shoppingItemsCart.push(value);
    }

    if (this.props.bread < 2) {
      let value = "Buy some bread";
      shoppingItemsCart.push(value);
    }

    if (this.props.fruit < 10) {
      let value = "Buy some fruit";
      shoppingItemsCart.push(value);
    }

    if (this.props.juice < 2) {
      let value = "Buy some juice";
      shoppingItemsCart.push(value);
    }

    if (this.props.sweets < 5) {
      let value = "Buy some sweets";
      shoppingItemsCart.push(value);
    }

    return shoppingItemsCart;
  }

  render() {
    return (
      <div>
        Etc...
      </div>
    );
  }
}

export default NotesContainer;

Ваш Ответ

1   ответ
8

componentDidUpdate срабатывает при изменении реквизита или состояния. Если вы изменяете состояние в этом методе, вы вызываете бесконечный цикл (если вы не реализуетеshouldComponentUpdate).

Похоже, что ваше состояние меняется, когда вы получаете новый реквизит, поэтомуcomponentWillReceiveProps кажется хорошим местом. Отдокументы:

Вызывается, когда компонент получает новые реквизиты. Этот метод не вызывается для начального рендеринга.

Используйте это как возможность отреагировать на переход опоры передrender() вызывается путем обновления состояния с помощьюthis.setState(), Старые реквизиты могут быть доступны через this.props. призваниеthis.setState() внутри этой функции не будет запускаться дополнительный рендер.

Похожие вопросы