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

Question

我是新来的反应，我想知道为什么我一直得到这个无法读取“未定义”错误的属性值。 当我控制台记录 this.state.username 和 this.state.todoList 时，我可以看到状态正在更新，但只有在我单击提交按钮后才会出现错误。

有什么建议么？ 谢谢！

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

你的onSubmit正在失去这个上下文。 您应该尝试其中一种方法，但我建议您使用箭头 function。

• 你应该.bind(this)到onSubmit

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

• 将onSubmit定义为箭头 function

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

Answer 2

您没有将onSubmit函数/方法绑定到this ，因此this没有上下文并且将返回未定义。 您可以将this绑定到构造函数中的onSubmit以修复错误。

避免绑定this的另一种方法是为您的 class 方法/函数使用箭头函数，因为它们会自动将this绑定到 function，您不必担心自己做。

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.

这是bind方法的定义

bind() 方法创建一个新的 function，当调用它时，它的 this 关键字设置为提供的值，在调用新的 ZC1C425268E68385D1AB5074C17A94F1 时，给定的 arguments 序列在任何提供的序列之前。

因此，如果您有这样的组件Home定义

 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>

在这里你会得到一个错误，告诉你"TypeError: this is undefined"

所以要解决这个问题，你必须像这样使用bind

 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>

或者为了完全避免使用bind ，因为您可以在组件中定义这么多方法，您可以使用arrow function看起来像这样

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>
    }
}