react this.state가 정의되지 않았습니까?

react this.state가 정의되지 않았습니까?

을 PLURALSIGHT로 합니다.양식을 제출하면 값이 전달됩니다.addUser을 userName으로 .this.state.users가 납니다.

 App.jsx:14 Uncaught TypeError: Cannot read property 'users' of undefined

요소

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
    }
    // This is triggered on form submit in different component
    addUser(userName) { 
        console.log(userName) // correctly gives String
        console.log(this.state) // this is undefined
        console.log(this.state.users) // this is the error
        // and so this code doesn't work
        /*this.setState({
            users: this.state.users.concat(userName)
        })*/
    }
    render() {
        return (
            <div>
            <Form addUser={this.addUser}/>
            </div>
            )
    }
}

export default Component

했을 때{this.addUser}this컴포넌트.addUser에 존재합니다.scope, '' 아래에 는 '''입니다addUser하고 있는 thisstate컴포넌트의 범위내에 하지만, 는 「클래스(컴포넌트)」의 .addUser method를 하면 method의 합니다.addUser상태, 사용자 등과는 전혀 다른 범위입니다. 문제를 하려면 , 「」를 바인드 할 .this""를 호출하는 "addUser방법.따라서 당신의 방법은 항상 의 인스턴스를 알 수 있습니다.this.

따라서 코드의 최종 변경은 다음과 같습니다.

<Form addUser={this.addUser.bind(this)}/>

또는

---

You can bind this in the constructor,because it is the place when you should intialize things because constructor methods are called first when the components render to the DOM.

따라서 다음과 같이 할 수 있습니다.

  constructor(props) {
    super(props);
    this.state = {
        users: null
    }
    this.addUser=this.addUser.bind(this);
}

이제 이전과 같이 일반적인 방법으로 부를 수 있습니다.-

<Form addUser={this.addUser}/>

이게 효과가 있길 바라며 분명히 말씀드렸잖아요

@Vinit Raj의 어프로치는 완벽하게 동작합니다.따라서 화살표 함수 구문을 사용하는 것이 좋습니다.

<Form addUser={ () => this.addUser() }/>

이와 같은 익명 기능을 사용하면 아무 데도 바인딩할 필요가 없습니다.

화살표 기능을 사용하고 싶은 경우는, 다음과 같이 합니다.화살표 함수 구문은 다음과 같습니다.

addUser = event => { 
    const { value }  = event.target;
    console.log("value", value);
}

모든 렌더링 또는 재렌더에서 이 함수가 호출되지 않도록 하려면

바꾸다

<Form addUser={this.addUser}/>

로.

<Form addUser={() => this.addUser()}/>

addUser는 이벤트가 발생하거나 트리거되었을 때만 호출됩니다.

다른 답변들은 이것을 잘 설명하지 못하는 것 같다.★★★★ Javascript가 인 것 .this키워드는 미쳤어(MDN은 "JavaScript에서 다른 언어와 비교하여 조금 다르게 동작한다"고 매우 관대하게 말합니다).

은 그 TL입니다.DR drthis반드시 메서드가 정의되어 있는 클래스는 아닙니다.「 」를 사용하는 this.addUser 안에서<Form> 「」,this는 '사상'입니다.Form★★★★★★ 짓을 하는지 걸잘 은 간단합니다리액트(Respect(반응)왜 누군가가 그걸 원하는지는 잘 모르겠지만 쉽게 확인할 수 있어요. ★★★★★★★★★★★★★★★★★★★★★★★console.log(this)addUser 보면 예'의 한 을 알 수 거예요.Form.

어쨌든 해결책은 매우 간단합니다. 츠키노.this정의되어 있는 점에 있습니다.다른 사람들이 제안한 대로 렌더링 함수에 하나를 넣는 경우:

<Form addUser={() => this.addUser()}/>

그럼 언제render()실행 중입니다.this를 참조합니다.Component객체, 화살표 기능은 객체 복사본을 만들고 실행 시 해당 복사본을 사용합니다.기본적으로 이 코드의 줄임말입니다(또한 화살표가 기능하기 전에 사람들이 하던 작업입니다).

    render() {
        const that = this; // Make a copy of this.
        return (
            <div>
            <Form addUser={function() { return that.addUser; }}/>
            </div>
            )
    }

또한 다른 사람들이 언급했듯이 렌더링 함수를 호출할 때마다 새로운 함수를 만드는 것은 성능에 영향을 미칠 수 있으므로 캡처하는 것이 좋습니다.this한번은 다른 곳에서요저는 이것이 다른 사람들이 제안한 것보다 더 나은 접근법이라고 생각합니다.

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
    }
    // This is triggered on form submit in different component
    addUser = (userName) => { 
        this.setState({
            users: this.state.users.concat(userName)
        })
    }
    render() {
        return (
            <div>
            <Form addUser={this.addUser}/>
            </div>
            )
    }
}

하지만 오늘은 React를 처음 사용하는 날이고, 저는 보통 Javascript처럼 완전히 짖는 언어를 사용하는 것을 피하려고 합니다. 그러니 이 모든 것을 가볍게 받아들이세요!

저도 같은 문제가 있었습니다만, 제 문제는 접속을 시도하고 있었습니다.this.state = { ... }콜이 종료되었습니다.이런 거 하고 있었어this.state = { ...this.function1() } ★★★★★★★★★★★★★★★★★」function1 = () => { a: this.state.b }이 이 되기를

이 경우 기능을 팻 화살표 함수로 선언함으로써 컨텍스트를 추가하고 여기에 바인딩할 요건을 제거합니다.이 방법은 다른 솔루션과 동일하게 작동하지만 쓰기 및 읽기가 훨씬 간편해집니다.그냥 갈아입고...

 addUser(userName) { 
    console.log(userName) // correctly gives String
    console.log(this.state) // this is undefined
    console.log(this.state.users) // this is the error
    // and so this code doesn't work
    /*this.setState({
        users: this.state.users.concat(userName)
    })*/
}

~에 대해서

addUser = (userName) => { 
    console.log(userName) // correctly gives String
    console.log(this.state) // this is undefined
    console.log(this.state.users) // this is the error
    // and so this code doesn't work
    /*this.setState({
        users: this.state.users.concat(userName)
    })*/
}

그리고 다른 모든 것들은 그대로 유지될 수 있다.

적절한 패턴은 생성자 함수의 클래스에 메서드를 바인딩하는 것입니다.https://reactjs.org/docs/handling-events.html 를 참조해 주세요.

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
  this.addUser = this.addUser.bind(this); 
  //bind functions which need access to "this"v in the constructor here. 

    }
    // This is triggered on form submit in different component
    addUser(userName) { 
        console.log(userName) // correctly gives String
        console.log(this.state) // this is undefined
        console.log(this.state.users) // this is the error
        // and so this code doesn't work
        /*this.setState({
            users: this.state.users.concat(userName)
        })*/
    }
    render() {
        return (
            <div>
            <Form addUser={this.addUser}/>
            </div>
            )
    }
}

export default Component

문제는 이 문맥에 있습니다.따라서

<form onSubmit={(event)=>this.addUser(event)}>
   // Inputs
</form>
addUser(event){
   event.preventDefault()
   // Code this.state 
}

단순하게 기능에서 비동기 사용

addUser =async (userName) => { console.log(this.state.users) }

이것은 잘 작동한다

언급URL : https://stackoverflow.com/questions/45998744/react-this-state-is-undefined