ReactJS: Получение ошибки в массиве. Его поговорка «TypeError: Невозможно прочитать свойство handleDismiss из неопределенного». Не могу понять, почему - PullRequest
Новая
       6

ReactJS: Получение ошибки в массиве. Его поговорка «TypeError: Невозможно прочитать свойство handleDismiss из неопределенного». Не могу понять, почему

0 голосов
/ 18 января 2019

По какой-то причине я получаю сообщение об ошибке после нажатия моей кнопки отклонения Он говорит: «TypeError: Невозможно прочитать свойство handleDismiss из undefined». Я понятия не имею, почему это происходит. Потратил целый день на поиски, но безрезультатно

Я пытался изменить обработчики, а также привязать кнопку. Все тот же результат «TypeError: Невозможно прочитать свойство handleDismiss из неопределенного» * ​​1003 * 

import React, { Component } from 'react';
import './App.css';


const basketballPlayers = [
  {id:1, name:"Stephen Curry", rating:97, position: "PG"},
  {id:2, name:"Kevin Durant", rating:85, position: "PF"},
  {id:3, name:"Klay Thompson", rating:80, position: "SG"},
  {id:4, name:"Vince Carter", rating:72, position: "SG"},
  {id:5, name:"Yao Ming", rating:99, position: "C"}
];

class App extends Component {

  constructor(props) {
    super(props);

    this.state ={
      basketballPlayers: basketballPlayers
    }
  }

  handleDismiss=(id) =>{
    console.log(id);
  }

  handleSubmit(e) {
    e.preventDefault();
    const searchTerm = e.target.elements.inputTerm.value;
    console.log("search term",searchTerm);
  }
  render() {
    return (
      <div className="App">
      <h1>Basketball Players</h1>
      <form onSubmit={this.handleSubmit}>
        <input name="inputTerm"/>
        <button class="btn btn-success btn-sm">SEARCH</button>
      </form>
       {this.state.basketballPlayers.map(function(basketballPlayer) {
         return(
           <div key={basketballPlayer.id}>
             <p>{basketballPlayer.name}</p>
             <p>{basketballPlayer.rating}</p>
             <p>{basketballPlayer.position}</p>
             <button onClick={()=>this.handleDismiss(basketballPlayer.id)}>Dismiss</button>
             </div>
         );
       })}
      </div>
    );
  }
}

export default App;

Я просто хочу, чтобы моя кнопка перестала показывать ошибку. Я хочу записать идентификационный номер каждого объекта на консоль

Ответы [ 3 ]

0 голосов
/ 18 января 2019

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

Вы можете исправить это, передав текущий контекст 'this' функции карты в качестве второго параметра ИЛИ используйте функцию стрелки ES6. 

this.state.basketballPlayers.map(function(basketballPlayer) { ... }, this)

ИЛИ 

this.state.basketballPlayers.map(basketballPlayer => { ... })
0 голосов
/ 18 января 2019

функция карты запутывает "это".Попробуйте изолировать функцию до: 

let { handleDismiss } = this
{this.state.basketballPlayers.map(function(basketballPlayer) {
     return(
       <div key={basketballPlayer.id}>
         <p>{basketballPlayer.name}</p>
         <p>{basketballPlayer.rating}</p>
         <p>{basketballPlayer.position}</p>
         <button onClick={()=>handleDismiss(basketballPlayer.id)}>Dismiss</button>
         </div>
     );
   })}
0 голосов
/ 18 января 2019

В вашей функции карты вы создаете новую функцию, которая будет иметь собственную this, вместо этого вы должны использовать анонимную функцию для использования родительского this, аналогично тому, как вы делали свой обработчик onClick: 

{this.state.basketballPlayers.map((basketballPlayer) => (
  <div key={basketballPlayer.id}>
    <p>{basketballPlayer.name}</p>
    <p>{basketballPlayer.rating}</p>
    <p>{basketballPlayer.position}</p>
    <button onClick={()=>this.handleDismiss(basketballPlayer.id)}>Dismiss</button>
  </div>
)}
...