时间戳

首页 > 解决方案 > 无法读取 this.state 未定义的属性“状态”

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

问题描述

我是新来的反应，我想知道为什么我一直得到这个无法读取“未定义”错误的属性值。当我对 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>
   );
 }
}

标签： reactjsstatereact-dom

解决方案

你onSubmit正在失去这个背景。您应该尝试其中一种方法，但我建议您使用箭头函数。

  • 你.bind(this)应该onSubmit

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

  • 定义onSubmit为箭头函数

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

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

推荐阅读