React - nicht abgerufen TypeError: Eigenschaft 'setState' von undefined nicht lesen
Ich erhalte folgende Fehlermeldung
Uncught TypeError: Eigenschaft 'setState' von undefined kann nicht gelesen werden
auch nach dem Binden von Delta im Konstruktor.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta.bind(this);
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}
Dies liegt daran, dass this.delta nicht an this gebunden ist.
Um das Set this.delta = this.delta.bind(this) im Konstruktor zu binden:
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta = this.delta.bind(this);
}
Derzeit rufen Sie bind an. Bind gibt jedoch eine gebundene Funktion zurück. Sie müssen die Funktion auf ihren gebundenen Wert setzen.
In ES7 + (ES2016) können Sie die experimentelle Funktionsbindungssyntax - Operator :: zum Binden verwenden. Es ist ein syntaktischer Zucker und wird dasselbe tun wie die Antwort von Davin Tryon.
Sie können dann this.delta = this.delta.bind(this); in this.delta = ::this.delta; umschreiben.
Für ES6 + (ES2015) können Sie auch die ES6 + Pfeilfunktion (=>) verwenden, um this verwenden zu können.
delta = () => {
this.setState({
count : this.state.count + 1
});
}
Warum ? Aus dem Mozilla-Dokument:
Bis zu den Pfeilfunktionen definiert jede neue Funktion ihren eigenen this Wert [...]. Dies erwies sich bei einem objektorientierten Programmierstil als störend.
Pfeilfunktionen erfassen den this Wert des umgebenden Kontextes [...]
Zwischen den Klassen ES5 und ES6 besteht ein unterschiedlicher Kontext. Es gibt also auch einen kleinen Unterschied zwischen den Implementierungen.
Hier ist die ES5-Version:
var Counter = React.createClass({
getInitialState: function() { return { count : 1 }; },
delta: function() {
this.setState({
count : this.state.count++
});
},
render: function() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
});
und hier ist die ES6-Version:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count : 1 };
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta.bind(this)}>+</button>
</div>
);
}
}
Seien Sie einfach vorsichtig, neben dem Syntaxunterschied in der Klassenimplementierung gibt es einen Unterschied in der Eventhandler-Bindung.
In der ES5-Version ist es
<button onClick={this.delta}>+</button>
In der ES6-Version heißt es:
<button onClick={this.delta.bind(this)}>+</button>
Verwenden Sie bei der Verwendung von ES6-Code in React immer Pfeilfunktionen, da der Kontext " this " automatisch mit ihm verbunden wird
Benutze das:
(videos) => {
this.setState({ videos: videos });
console.log(this.state.videos);
};
anstatt:
function(videos) {
this.setState({ videos: videos });
console.log(this.state.videos);
};
Sie müssen nichts binden, verwenden Sie einfach die Pfeilfunktionen:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 1
};
}
//ARROW FUNCTION
delta = () => {
this.setState({
count: this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}
Sie können auch verwenden:
<button onClick={()=>this.delta()}>+</button>
Oder:
<button onClick={event=>this.delta(event)}>+</button>
Wenn Sie einige Params übergeben ...
Sie müssen Ihre Methoden mit 'this' (Standardobjekt) binden. So was auch immer Ihre Funktion sein mag, binden Sie das einfach im Konstruktor.
constructor(props) {
super(props);
this.state = { checked:false };
this.handleChecked = this.handleChecked.bind(this);
}
handleChecked(){
this.setState({
checked: !(this.state.checked)
})
}
render(){
var msg;
if(this.state.checked){
msg = 'checked'
}
else{
msg = 'not checked'
}
return (
<div>
<input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
<h3>This is {msg}</h3>
</div>
);
Sie müssen dies an den Konstruktor binden und daran denken, dass Änderungen am Konstruktor den Server neu starten müssen. Oder Sie enden mit dem gleichen Fehler.
sie müssen ein neues Ereignis mit dieses Schlüsselwort binden, wie ich unten erwähne ...
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta = this.delta.bind(this);
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}
Es gibt zwei Lösungen für dieses Problem:
Die erste Lösung besteht darin, Ihrer Komponente einen Konstruktor hinzuzufügen und Ihre Funktion wie folgt zu binden:
constructor(props) {
super(props);
...
this.delta = this.delta.bind(this);
}
Also mach das:
this.delta = this.delta.bind(this);
An Stelle von:
this.delta.bind(this);
Die zweite Lösung besteht darin, stattdessen eine Pfeilfunktion zu verwenden:
delta = () => {
this.setState({
count : this.state.count++
});
}
Aktuelle Pfeilfunktion DOES NOT bindet die eigene this. Pfeil funktioniert lexikalisch bind ihr Kontext, so dass this tatsächlich auf den rsprungskontext verweist.
Weitere Informationen zur Bindefunktion:
BindefunktionGrundlegendes zu JavaScript Bind ()
Weitere Informationen zur Pfeilfunktion:
Dieser Fehler kann durch verschiedene Methoden behoben werden.
Wenn Sie ES5 -Syntax verwenden, müssen Sie gemäß React js Documentation bind -Methode verwenden.
So etwas für das obige Beispiel:
this.delta = this.delta.bind(this)Wenn Sie die Syntax ES6 verwenden, brauchen Sie die Methode bind nicht zu verwenden. Sie können dies folgendermaßen tun:
delta=()=>{ this.setState({ count : this.state.count++ }); }
Die Pfeilfunktion könnte Ihr Leben einfacher machen, um das Binden zu vermeiden this keyword. Wie so:
delta = () => {
this.setState({
count : this.state.count++
});
}
- Status prüfen Status prüfen, ob Sie eine bestimmte Eigenschaft erstellen oder nicht
this.state = {
name: "",
email: ""
}
this.setState(() => ({
comments: comments //comments not available in state
})) 2 .Aktivieren Sie das Kontrollkästchen (this) Wenn Sie setState in einer Funktion ausführen (d. H. HandleChange), überprüfen Sie, ob die an diese Funktion gebundene Funktion oder die Funktion eine Pfeilfunktion sein soll.
## 3 Möglichkeiten, dies an die folgende Funktion zu binden ##
//3 ways for binding this to the below function
handleNameChange(e) {
this.setState(() => ({ name }))
}
// 1.Bind while callling function
onChange={this.handleNameChange.bind(this)}
//2.make it as arrow function
handleNameChange((e)=> {
this.setState(() => ({ name }))
})
//3.Bind in constuctor
constructor(props) {
super(props)
this.state = {
name: "",
email: ""
}
this.handleNameChange = this.handleNameChange.bind(this)
}obwohl diese Frage bereits eine Lösung hatte, möchte ich nur meine weitergeben, damit sie geklärt wird. Ich hoffe, es könnte helfen:
/*
* The root cause is method doesn't in the App's context
* so that it can't access other attributes of "this".
* Below are few ways to define App's method property
*/
class App extends React.Component {
constructor() {
this.sayHi = 'hello';
// create method inside constructor, context = this
this.method = ()=> { console.log(this.sayHi) };
// bind method1 in constructor into context 'this'
this.method1 = this.method.bind(this)
}
// method1 was defined here
method1() {
console.log(this.sayHi);
}
// create method property by arrow function. I recommend this.
method2 = () => {
console.log(this.sayHi);
}
render() {
//....
}
}
Ändern Sie einfach Ihre Bind-Anweisung von dem, was Sie haben müssen. this.delta = this.delta.bind (this);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component{
constructor(props){
super(props);
this.state = {
counter : 0,
isToggle: false
}
this.onEventHandler = this.onEventHandler.bind(this);
}
increment = ()=>{
this.setState({counter:this.state.counter + 1});
}
decrement= ()=>{
if(this.state.counter > 0 ){
this.setState({counter:this.state.counter - 1});
}else{
this.setState({counter:0});
}
}
// Either do it as onEventHandler = () => {} with binding with this // object.
onEventHandler(){
this.setState({isToggle:!this.state.isToggle})
alert('Hello');
}
render(){
return(
<div>
<button onClick={this.increment}> Increment </button>
<button onClick={this.decrement}> Decrement </button>
{this.state.counter}
<button onClick={this.onEventHandler}> {this.state.isToggle ? 'Hi':'Ajay'} </button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root'),
);
</script>
</body>
</html>
Hinzufügen
onClick = {this.delta.bind (this)}
wird das Problem lösen. Dieser Fehler tritt auf, wenn wir versuchen, die Funktion der ES6-Klasse aufzurufen.