Я получаю сообщение об ошибке, не могу прочитать реквизиты undefined при использовании этого? [Дубликат]
Согласно блогу ниже, при вызове статического метода внутри класса функция-вызывающий должна быть методом класса, поэтому добавление @classmethod в определение вашего метода может решить проблему.
Окончательное руководство по использованию статических, классных или абстрактных методов в Python
5 ответов
ES6 React.Component не автоматически связывает методы с самим собой. Вы должны связать их самостоятельно в конструкторе. Например:
constructor (props){
super(props);
this.state = {
loopActive: false,
shuffleActive: false,
};
this.onToggleLoop = this.onToggleLoop.bind(this);
}
Если вы вызываете свой созданный метод в методах жизненного цикла, таких как componentDidMount ... тогда вы можете использовать только функцию this.onToggleLoop = this.onToogleLoop.bind(this) и функцию стрелки жира onToggleLoop = (event) => {...}.
Обычный подход к объявлению функция в конструкторе не работает, потому что методы жизненного цикла называются ранее.
Я столкнулся с аналогичным связыванием в функции рендеринга и в конечном итоге передал контекст this следующим образом:
{someList.map(function(listItem) {
// your code
}, this)}
Я также использовал:
{someList.map((listItem, index) =>
<div onClick={this.someFunction.bind(this, listItem)} />
)}
-
1Это много ненужных функций, которые вы создаете там, каждый раз, когда список отображается ... – T.J. Crowder 8 February 2018 в 19:38
-
2@ T.J.Crowder Да, это правда, эти функции создаются заново каждый раз, когда вызывается render. Лучше создавать функции как методы класса и связывать их один раз с классом, но для новичков может понадобиться ручное контекстное связывание – duhaime 8 February 2018 в 20:16
Есть несколько способов.
Одним из них является добавление this.onToggleLoop = this.onToggleLoop.bind(this); в конструктор.
Другим является функция стрелок onToggleLoop = (event) => {...}.
И тогда есть onClick={this.onToggleLoop.bind(this)}.
-
1
-
2
-
3Почему onToogleLoop = () = & gt; {} Работа? У меня такая же проблема, и я привязываю ее к моему конструктору, но он не работал ... и теперь я видел ваше сообщение и заменяю свой метод синтаксисом функции стрелки, и он работает. Вы можете мне это объяснить? – DrMed 15 September 2017 в 06:51
-
4из developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ; Функция стрелки не создает ее собственной, это значение используемого контекста выполнения. – J. Mark Stevens 15 September 2017 в 16:34
-
5Обратите внимание, что привязка inline в
onClickвозвращает новую функцию для каждого рендеринга и, следовательно, выглядит так, как новое значение передавалось для prop, возиться сshouldComponentUpdateвPureComponents. – Ninjakannon 25 May 2018 в 11:34
Напишите свою функцию следующим образом:
onToggleLoop = (event) => {
this.setState({loopActive: !this.state.loopActive})
this.props.onToggleLoop()
}
http://www.react.express/fat_arrow_functions
привязка для ключевое слово это одно и то же снаружи и внутри функции толстой стрелки. Это отличается от функций, объявленных функцией, которые могут связывать это с другим объектом при вызове. Поддержание этой привязки очень удобно для операций, таких как mapping: this.items.map (x => this.doSomethingWith (x)).
() => this.onToggleLoopпосле перемещения функции onToggleLoop в ваш класс реагирования, он также будет работать. – Sam 26 August 2016 в 18:50thisне определено в первую очередь? Я знаю, чтоthisв Javascript зависит от того, как называется функция, но что здесь происходит? – maverick 3 January 2018 в 17:26