реагирует на собственное состояние TypeError: один из источников для assign, имеет перечисляемый ключ в цепочке прототипов

Question

У меня проблемы с пониманием состояния и setState, и я не могу заставить мой код работать:

конструктор:

constructor(){
    super();
    this.state = {
      Ingredient : getRandomIngredient(baseArray)
    }
  }

кнопка:

<Button title="Mix Salad"
                onPress = {()=>this.handleButtonPress()}
        />

функция:

handleButtonPress= () => {
    this.setState(
      this.Ingredient = getRandomIngredient(baseArray)
    )
  }

Ошибка происходит, когда я нажимаю кнопку.Вопрос а) Как правильно использовать state и setState?Вопрос б) Исходное состояние не сохраняется с помощью функции render ().Мой ингредиент остается неопределенным.Это, вероятно, не предназначено.Что я могу сделать, чтобы объект Ingredient сохранил свои значения?

Answer 1

Вам необходимо использовать объект в вашем setState.

handleButtonPress = () => {
    this.setState({
        Ingredient: getRandomIngredient(baseArray)
    });
}

Answer 2

это неправильный синтаксис

this.setState(
  this.Ingredient = getRandomIngredient(baseArray)
)

правильно:

this.setState({ Ingredient : getRandomIngredient(baseArray) })

Функция SetState принимает ВСЕГДА и параметр объекта

РЕДАКТИРОВАТЬ: заботитьсяоб асинхронной функции, если getRandomIngredient() потребуется время для возврата значения, чтобы Ingredient был равен нулю