Phản ứng this.state là không xác định?

Question

tôi đang theo một hướng dẫn người mới bắt đầu từ Pluralsight, vào mẫu nộp một giá trị được truyền cho addUser phương pháp thành phần và tôi cần phải đẩy userName để this.state.users nhưng tôi nhận được lỗi

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

Component

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 

Answer 1

Khi bạn gọi {this.addUser}, nó được gọi, ở đây this là một thể hiện của lớp (thành phần) của bạn, và do đó nó không có lỗi cho bạn bởi vì phương pháp addUser không tồn tại trong lớp học của bạn scope, nhưng khi bạn đang sử dụng phương pháp , bạn đang sử dụng this để cập nhật state tồn tại trong phạm vi của lớp (thành phần), nhưng hiện tại bạn đang ở trong phạm vi addUser và do đó bạn sẽ gặp lỗi dưới addUser Phạm vi bạn không có gì giống như nhà nước, người dùng, vv Vì vậy, để giải quyết vấn đề này, bạn cần phải ràng buộc this trong khi bạn đang gọi phương thức addUser. Do đó, phương pháp của bạn luôn biết ví dụ của this.

Vì vậy, sự thay đổi cuối cùng trong mã của bạn sẽ trông như thế này: -

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

HOẶC

---

Bạn có thể ràng buộc this trong các nhà xây dựng, bởi vì nó là nơi khi bạn cần intialize thứ vì phương pháp xây dựng được gọi là đầu tiên khi các thành phần hiển thị trên DOM.

Vì vậy, bạn có thể làm điều đó theo cách này: -

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

Và bây giờ bạn có thể gọi nó theo cách bình thường như bạn đã làm trước đây: -

<Form addUser={this.addUser}/> 

Tôi hy vọng điều này sẽ làm việc, Và Tôi đã nói rõ với bạn.