Ik krijg de volgende foutmelding
Uncaught TypeError: kan eigenschap ‘setState’ van undefined niet lezen
zelfs na binding van delta in de constructor.
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>
);
}
}
Antwoord 1, autoriteit 100%
Dit komt doordat this.delta niet gebonden is aan this.
Om te binden stelt u this.delta = this.delta.bind(this) in in de constructor:
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta = this.delta.bind(this);
}
Momenteel noem je bind. Maar bind retourneert een gebonden functie. U moet de functie op de grenswaarde instellen.
Antwoord 2, autoriteit 32%
In ES7+ (ES2016) kunt u de experimentele function bind-syntaxis gebruiken operator :: om te binden. Het is een syntactische suiker en zal hetzelfde doen als het antwoord van Davin Tryon.
Je kunt dan this.delta = this.delta.bind(this); herschrijven naar this.delta = ::this.delta;
Voor ES6+ (ES2015) kunt u ook de ES6+ pijlfunctie (=>) om this te kunnen gebruiken.
delta = () => {
this.setState({
count : this.state.count + 1
});
}
Waarom? Uit het Mozilla-document:
Tot de pijlfuncties, definieerde elke nieuwe functie zijn eigen deze waarde […]. Dit bleek vervelend te zijn met een objectgeoriënteerde programmeerstijl.
Pijlfuncties vangen de this waarde van de omsluitende context […]
Antwoord 3, autoriteit 6%
Er is een verschil in context tussen de ES5- en ES6-klasse. Er zal dus ook een klein verschil zijn tussen de implementaties.
Hier is de ES5-versie:
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>
);
}
});
en hier is de ES6-versie:
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>
);
}
}
Wees voorzichtig, naast het syntaxisverschil in de klasse-implementatie, is er een verschil in de binding van de gebeurtenishandler.
In de ES5-versie is het
<button onClick={this.delta}>+</button>
In de ES6-versie is het:
<button onClick={this.delta.bind(this)}>+</button>
Antwoord 4, autoriteit 5%
Gebruik bij gebruik van ES6-code in React altijd pijlfuncties, omdat de context deze er automatisch mee wordt verbonden
Gebruik dit:
(videos) => {
this.setState({ videos: videos });
console.log(this.state.videos);
};
in plaats van:
function(videos) {
this.setState({ videos: videos });
console.log(this.state.videos);
};
Antwoord 5, autoriteit 5%
Je hoeft niets te binden, gebruik gewoon de Arrow-functies zoals deze:
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>
);
}
}
Antwoord 6
U kunt ook het volgende gebruiken:
<button onClick={()=>this.delta()}>+</button>
Of:
<button onClick={event=>this.delta(event)}>+</button>
Als je een aantal parameters doorgeeft..
Antwoord 7
U moet uw methoden binden met ‘this’ (standaardobject).
Dus wat je functie ook mag zijn, bind dat gewoon in de constructor.
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>
);
Antwoord 8
Je moet dit aan de constructor binden en onthoud dat voor wijzigingen aan de constructor de server opnieuw moet worden opgestart. Anders eindig je met dezelfde fout.
Antwoord 9
je moet een nieuw evenement binden met dit zoekwoord zoals ik hieronder vermeld…
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>
);
}
}
Antwoord 10
Deze fout kan op verschillende manieren worden opgelost:
-
Als je de ES5-syntaxis gebruikt, dan volgens React js Documentation you
moet de bind methode gebruiken.Zoiets voor het bovenstaande voorbeeld:
this.delta = this.delta.bind(this) -
Als u de ES6-syntaxis gebruikt, hoeft u de bind-methode niet te gebruiken, u kunt
doe het met zoiets als dit:delta=()=>{
this.setState({
count : this.state.count++
});
}
Antwoord 11
Er zijn twee oplossingen voor dit probleem:
De eerste oplossing is het toevoegen van een constructor aan uw component en bind uw functie zoals hieronder:
constructor(props) {
super(props);
...
this.delta = this.delta.bind(this);
}
Dus doe dit:
this.delta = this.delta.bind(this);
In plaats van dit:
this.delta.bind(this);
De tweede oplossing is om in plaats daarvan een pijlfunctie te gebruiken:
delta = () => {
this.setState({
count : this.state.count++
});
}
Eigenlijk bindt de pijlfunctie NIET zijn eigen this. Pijlfuncties bind hun context lexicaal, dus this verwijst eigenlijk naar de oorspronkelijke context.
Voor meer informatie over de bindfunctie:
Bind-functie
JavaScript Bind begrijpen ()
Voor meer informatie over de pijlfunctie:
Javascript ES6 Pijlfuncties en Lexicale this
Antwoord 12
Pijlfunctie had uw leven gemakkelijker kunnen maken om te voorkomen dat u dit zoekwoord bindt. Vind ik leuk:
delta = () => {
this.setState({
count : this.state.count++
});
}
Antwoord 13
als u de ES5-syntaxis gebruikt, moet u deze correct binden
this.delta = this.delta.bind(this)
en als u ES6 en hoger gebruikt, kunt u de pijlfunctie gebruiken, dan hoeft u bind() it
niet te gebruiken
delta = () => {
// do something
}
Antwoord 14
Verander gewoon je bind-instructie van wat je moet
=>
this.delta = this.delta.bind(this);
Antwoord 15
Toevoegen
onClick={this.delta.bind(this)}
zal het probleem oplossen.
deze fout treedt op wanneer we de functie van ES6-klasse proberen aan te roepen,
Dus we moeten de methode binden.
Antwoord 16
Hoewel deze vraag al een oplossing had, wil ik de mijne delen om het duidelijk te maken, ik hoop dat het kan helpen:
/*
* 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() {
//....
}
}
Antwoord 17
<!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>
Antwoord 18
- Status controleren
controleer staat of u een bepaalde eigenschap aanmaakt of niet
this.state = {
name: "",
email: ""
}
this.setState(() => ({
comments: comments //comments not available in state
})) Antwoord 19
Als je inside axios gebruikt, gebruik dan de pijl(=>) in then
axios.get(‘abc.com’).then((respons) => {});