Реактивная функция не определена в onClick, хотя она связана? - PullRequest
Новая
       6

Реактивная функция не определена в onClick, хотя она связана?

0 голосов
/ 02 июля 2018

У меня есть эта функция: 

  deleteTag() {
    // this.data.tags.pop();
    console.log("I will delete a tag");
  }

Я связываю это в конструкторе: 

this.deleteTag = this.deleteTag.bind(this);

Но когда я пытаюсь сделать это: 

render() {
    const renderTags = this.state.data.tags.map(function(tag,i){
      return <span key={i} onClick={() => this.deleteTag()}>{tag} </span>
    });

   return ( <div> {renderTags} </div> );
}

Я получаю:

Uncaught TypeError: Невозможно прочитать свойство 'deleteTag' из неопределенного в onClick (bundle.js: 46275) в Object.ReactErrorUtils.invokeGuardedCallback (bundle.js: 4594) в executeDispatch (bundle.js: 4394) в Object.executeDispatchesInOrder (bundle.js: 4417) at executeDispatchesAndRelease (bundle.js: 3847) at executeDispatchesAndReleaseTopLevel (bundle.js: 3858) в Array.forEach () в forEachAccumulated (bundle.js: 4694) в Object.processEventQueue (bundle.js: 4063) at runEventQueueInBatch (bundle.js: 4723)

Я уверен, что это что-то глупое, но я не могу понять это!

1 Ответ

0 голосов
/ 02 июля 2018

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

const renderTags = this.state.data.tags.map((tag,i) => {
  return <span key={i} onClick={() => this.deleteTag()}>{tag} </span>
});
...