Question

每当我随后触发readItem（）和handleChange（）时，浏览器都会引发错误“ this.setState不是函数”。否则，HandleChange（）效果很好。有人可以告知导致此错误的原因以及如何解决该错误吗？我还期望readtItem（）函数更新状态，但不会发生。任何帮助将不胜感激。

谢谢

private

Answer 1

您无法像this.setState = {readItem: item}这样更新状态 setState是一个函数，应使用this.setState({items: filteredItems})

Answer 2

尝试使所有方法的箭头功能（例如handleChange=()=>{}）在正常功能中没有此功能

Answer 3

在使用this.setState时，听起来好像在使用Component类。在子元素（例如onChange等）上调用回调时，上下文（此）设置为子元素本身。为了保留正确的“ this”上下文，您需要绑定回调函数。

在您的类的构造函数中，添加以下内容以绑定您的方法：

this.handleChange = this.handleChange.bind(this);

See here了解有关处理事件的更多信息

将来，请上传相关代码段。

Answer 4

确保this已绑定到ex的回调中。 handleChange，方法是在构造函数中添加绑定代码。

constructor(props) {
    super(props);
    this.state = {
      items:[], 
      readItem: {
        name:'',
        email:'',
        phone:'',
        myId:''
      },     
      currentItem:{
        name:'',
        email:'',
        phone:''               
      }
    }

    // Add below line for all callbacks
    this.handleChange = this.handleChange.bind(this)
    
  }

如果您不想在构造函数中使用arrow代码，也可以在回调中使用bind函数。这是两个用例的class component CodeSandbox。该示例改编自官方文档。

如果您正在使用新的代码库或React的新代码，我强烈建议您使用功能组件代替类组件。在我看来，功能性组件和useState API比类组件简单得多，且不那么冗长。这是上述示例的functional component CodeSandbox。

反应handleChange抛出错误“ this.setState不是函数”

4 个答案: