无法读取 this.state 的未定义属性“状态”

Question

I'm new to react and I was wonder why I keep getting this cannot read property value of "undefined" error. When i consolelog the this.state.username and this.state.todoList I can see that states updating but only after I clicked the submit button it gives me the error.

Any suggestions? Thank you!

import React, { Component } from "react";
import axios from "axios";

export default class TestNote extends Component {
   constructor(props) {
   super(props);

   this.onChangeUsername = this.onChangeUsername.bind(this);
   this.onChangeTodoList = this.onChangeTodoList.bind(this);

   this.state = {
      username: "",
      todoList: "",
   };
}

onChangeUsername(e) {
   this.setState({
     username: e.target.value,
   });
   console.log(this.state.username);
}

onChangeTodoList(e) {
   this.setState({
     todoList: e.target.value,
   });
 }

 onSubmit(e) {
   e.preventDefault();

   const todoList = {
     username: this.state.username,
     todoList: this.state.todoList,
  };

console.log(todoList);

axios
  .post("http://localhost:5000/list/add", todoList)
  .then((res) => console.log(res.data));
 }

 render() {
   return (
     <div className="container">
       <form>
         <label>Username: </label>
         <input
           type="text"
           required
           value={this.state.username}
           onChange={this.onChangeUsername}
         />
         <label>TodoList: </label>
         <input
           type="text"
           value={this.state.todoList}
           onChange={this.onChangeTodoList}
         />
         <input type="submit" value="Add This List" onClick={this.onSubmit} />
       </form>
     </div>
   );
 }
}

Answer 1

Your onSubmit are losing this context. You should try one of these methods, but I recommend you using arrow function.

• You should .bind(this) to onSubmit

 ... <input type="submit" value="Add This List" onClick={this.onSubmit.bind(this)} />...

• Defined onSubmit as an arrow function

 ... onSubmit = (e) => { e.preventDefault(); const todoList = { username: this.state.username, todoList: this.state.todoList, }; }...

Answer 2

You did not bind onSubmit function/method to this , therefore this has no context and would return undefined. You can bind this to onSubmit in the constructor to fix the error.

Another way to avoid having to bind this is to use arrow functions for your class methods/functions as they automatically bind this to that function, you won't have to worry about doing it yourself.

constructor(props) {
    super(props);
    this.state = {
       username: "",
       todoList: ""
    };

    //  this.onChangeUsername = this.onChangeUsername.bind(this);
    //  this.onChangeTodoList = this.onChangeTodoList.bind(this);

    //  this.onSubmit = this.onSubmit.bind(this);
  }

  onChangeUsername = e => {
    this.setState({
      username: e.target.value
    });
    console.log(this.state.username);
  };

  onChangeTodoList = e => {
    this.setState({
      todoList: e.target.value
    });
  };

  onSubmit = (e) => {
    e.preventDefault();

    const todoList = {
      username: this.state.username,
      todoList: this.state.todoList
   };

Answer 3

When you define function in your component without using arrow function you have to bind to each function the this keyword in the constructor for that function to consider each reference of this in if definition to refer to the created component.

Here is the definition of the bind method

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

So if you have component Home define like this

 class Home extends React.Component { constructor(props) { super(props); this.state = { name: "Jeanne Doe" } } handleChangeName () { this.setState({name: "John Doe"}); } render() { return <div> <h2>Welcome {this.state.name}</h2> <button onClick={this.handleChangeName}>Change name</button> </div> } } ReactDOM.render(<Home />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script> <div id="root"></div>

Here you get the error that tell you "TypeError: this is undefined"

So to fix that you have to use bind like this

 class Home extends React.Component { constructor(props) { super(props) this.state = { name: "Jeanne Doe" } this.handleChangeName = this.handleChangeName.bind(this); } handleChangeName () { this.setState({name: "John Doe"}); } render() { return <div> <h2>Welcome {this.state.name}</h2> <button onClick={this.handleChangeName}>Change name</button> </div> } } ReactDOM.render(<Home />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Or to completely avoid the use of bind as you can have so many methods define in your component you can use arrow function which look like this

class Home extends React.Component {
    constructor(props)  {
      super(props);
      this.state = {
        name: "Jeanne Doe"
      }
    }

    const handleChangeName = () => {
        this.setState({name: "John Doe"});
    }

    render() {
        return <div>
            <h2>Welcome {this.state.name}</h2>
            <button onClick={this.handleChangeName}>Change name</button>
        </div>
    }
}