TypeError: Невозможно прочитать свойство 'getIngredients' из неопределенного - PullRequest
Новая
       4

TypeError: Невозможно прочитать свойство 'getIngredients' из неопределенного

0 голосов
/ 03 февраля 2020

Я пытаюсь динамически создавать кнопки из запроса API. Я добавил еду в объект, и теперь я динамически создаю элементы DOM с помощью функции карты. Я сталкиваюсь с проблемой, где я пытаюсь создать кнопки, и onClick приводит к проблеме. я получаю "TypeError: Невозможно прочитать свойство 'getIngredients' of undefined", где getIngredients - это функция, которую я пытаюсь вызвать ...

Что я пытался: прежде чем он не работал, поэтому я исправил проблему с привязкой ( с функцией стрелки). это позволило странице динамически создавать элементы. Теперь проблема, к которой я прибегаю: нажатие кнопки приводит к ошибке.

конструктор 

class Prediction extends React.Component {
  constructor(props) {
    super(props);
    this.state = { usersFood: "", domElementsObj: [], foodTemp: [] };
  }

get getingredients function 

  getIngredients = params => {

    params.map(function(x, i) {
      console.log(i);
      fetch(
        `${base}?q=${params[0]}&app_id=${YOUR_APP_ID}&app_key=${YOUR_APP_KEY}`
      )
        .then(response => {
          console.log(response.json());
        })
        .catch(function(error) {
          console.log(error);
        });
    });
  };

динамически создавая dom: 

    let predictionDOM = this.state.domElementsObj.map(function(obj, i) {
      return (
        <div>
          <li key={obj[0]}>
            <button onClick={() => this.getIngredients(obj[0])}>
              {obj[0] + " -----"}
            </button>
            <span> ---- % of accuracy : {obj[1]} --</span>
            <button> Save to favorites</button>
          </li>
        </div>
      );
    });
    return (
      <div>
        <h1>testing api</h1>
        <p>Enter in your food :</p>
        <input
          type="text"
          value={this.state.usersFood}
          onChange={this.handleChange}
          placeholder="Enter your food"
        />
        <button onClick={this.getPredictions}>Make Predictions</button>
        {predictionDOM}
      </div>
    );
  }
}```

1 Ответ

1 голос
/ 03 февраля 2020

"Вам необходимо использовать функции стрелок для сохранения контекста этого. Поэтому измените его, чтобы в нем можно было делатьpretionDD = this.state.domElementsObj.map ((obj, i) => {..."

спасибо за помощь @ Jayce444

...