반응-포착되지 않은 TypeError : 정의되지 않은 'setState'속성을 읽을 수 없습니다.
다음과 같은 오류가 발생합니다
잡히지 않은 TypeError : 정의되지 않은 'setState'속성을 읽을 수 없습니다
생성자에서 델타를 바인딩 한 후에도.
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>
);
}
}
this.delta에 바인딩되지 않았기 때문 this입니다.
this.delta = this.delta.bind(this)생성자에서 set을 바인딩하려면 :
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta = this.delta.bind(this);
}
현재 바인드를 호출하고 있습니다. 그러나 bind는 바운드 함수를 반환합니다. 함수를 바인딩 된 값으로 설정해야합니다.
에서는 ES7 + (ES2016)는 실험 사용할 수 기능 바인드 구문 연산자를 ::바인드한다. 그것은 구문 설탕이며 Davin Tryon의 대답과 똑같이 할 것입니다.
그런 다음 다시 작성할 수 있습니다 this.delta = this.delta.bind(this);에this.delta = ::this.delta;
들어 ES6 + (ES2015) 당신은 또한 ES6를 사용 + 수있는 기능을 화살표 ( =>사용할 수 있도록) this.
delta = () => {
this.setState({
count : this.state.count + 1
});
}
왜 ? Mozilla 문서에서 :
화살표 함수까지 모든 새로운 함수는 자체적 으로이 값을 정의했습니다 [...]. 이것은 객체 지향 스타일의 프로그래밍으로 성가신 것으로 판명되었습니다.
화살표 함수 는 둘러싼 컨텍스트 의이 값을 캡처합니다 ...]
ES5와 ES6 클래스 사이에는 컨텍스트가 다릅니다. 따라서 구현 사이에도 약간의 차이가 있습니다.
ES5 버전은 다음과 같습니다.
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>
);
}
});
그리고 여기 ES6 버전이 있습니다 :
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>
);
}
}
클래스 구현의 구문 차이 외에도 이벤트 핸들러 바인딩에 차이가 있습니다.
ES5 버전에서는
<button onClick={this.delta}>+</button>
ES6 버전에서는 다음과 같습니다.
<button onClick={this.delta.bind(this)}>+</button>
React에서 ES6 코드를 사용할 때는 항상 화살표 기능을 사용하십시오. 이 컨텍스트는 자동으로 바인딩되므로
이것을 사용하십시오 :
(videos) => {
this.setState({ videos: videos });
console.log(this.state.videos);
};
대신에:
function(videos) {
this.setState({ videos: videos });
console.log(this.state.videos);
};
당신은 아무것도 바인딩 할 필요가 없으며 다음과 같이 Arrow 함수를 사용하십시오.
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>
);
}
}
다음을 사용할 수도 있습니다.
<button onClick={()=>this.delta()}>+</button>
또는:
<button onClick={event=>this.delta(event)}>+</button>
당신은 몇 가지 매개 변수를 전달하는 경우 ..
이것을 생성자에 바인딩하고 생성자에 대한 변경 사항이 서버를 다시 시작해야한다는 것을 기억하십시오. 그렇지 않으면 같은 오류로 끝납니다.
메소드를 'this'(기본 객체)로 바인딩해야합니다. 따라서 함수가 무엇이든간에 생성자에서 바인딩 할 수 있습니다.
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>
);
이 오류는 다양한 방법으로 해결할 수 있습니다.
ES5 구문을 사용하는 경우 React js Documentation에 따라 bind 메소드 를 사용해야 합니다.
위 예제에서 이와 같은 것 :
this.delta = this.delta.bind(this)당신이 사용하는 경우 ES6의 구문을 다음 사용할 필요가 없다 바인드 방법을, 당신은 이런 식으로 뭔가 함께 할 수 있습니다 :
delta=()=>{ this.setState({ count : this.state.count++ }); }
아래에서 언급 한 것처럼 이 키워드로 새 이벤트를 바인딩해야 합니다 ...
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>
);
}
}
첨가
onClick = {this.delta.bind (this)}
문제를 해결할 것입니다. 이 오류는 ES6 클래스의 함수를 호출하려고 할 때 발생하므로 메소드를 바인딩해야합니다.
화살표 기능을 사용 하면이 키워드의 바인딩을 피하기가 더 쉬워 질 수 있습니다 . 이렇게 :
delta = () => {
this.setState({
count : this.state.count++
});
}
이 문제에 대한 두 가지 해결책이 있습니다.
첫 번째 해결책은 구성 요소에 생성자를 추가하고 다음과 같이 함수를 바인딩하는 것입니다.
constructor(props) {
super(props);
...
this.delta = this.delta.bind(this);
}
이렇게하십시오 :
this.delta = this.delta.bind(this);
이 대신에 :
this.delta.bind(this);
두 번째 해결책은 대신 화살표 기능을 사용하는 것입니다.
delta = () => {
this.setState({
count : this.state.count++
});
}
실제로 화살표 함수 는 자신의 바인딩 하지 않습니다this . 어휘 기능은 어휘 적 bind으로 컨텍스트를 나타내 므로 this실제로는 원래 컨텍스트를 참조합니다 .
바인드 함수에 대한 자세한 정보 :
화살표 기능에 대한 자세한 정보 :
Javascript ES6 — 화살표 함수 및 어휘 this
이 질문에 이미 해결책이 있었지만 명확하게하기 위해 공유하고 싶습니다. 도움이 될 수 있기를 바랍니다.
/*
* 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() {
//....
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/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>
바인드 문을 변경하십시오 => this.delta = this.delta.bind (this);
- 상태 확인 특정 속성을 만들지 여부를 확인합니다.
this.state = {
name: "",
email: ""
}
this.setState(() => ({
comments: comments //comments not available in state
})) 2. 함수 (예 : handleChange) 내에서 setState를 수행하는 경우 (this)를 확인하십시오. 함수가이 함수에 바인딩되는지 또는 화살표 함수인지를 확인하십시오.
이것을 아래 함수에 바인딩하는 3 가지 방법
//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)
}'IT' 카테고리의 다른 글
| 문자열을 유효한 파일 이름으로 바꾸시겠습니까? (0) | 2020.03.28 |
|---|---|
| 자식 필터 분기로 줄 끝을 수정하려고하지만 운이 없습니다. (0) | 2020.03.28 |
| 병합 후 커밋시 Git 오류-치명적 : 병합 중 부분 커밋을 수행 할 수 없음 (0) | 2020.03.28 |
| Mercurial로 사용자 이름과 비밀번호를 저장하는 방법은 무엇입니까? (0) | 2020.03.28 |
| f (i = -1, i = -1) 동작이 정의되지 않은 이유는 무엇입니까? (0) | 2020.03.28 |