尝试更新状态单击会导致"this.setState is not a function"错误

Question

在我的SideMenuContainer组件中的以下SideMenuRow子div中，我调用了changeInfoList方法。该方法位于父App.js中。

在应用中.js：

<SideMenuContainer changeInfoList={this.changeInfoList} genInfoList={this.state.genInfoList} groupedObjectsList={this.state.groupedObjectsList}/>

在 SideMenuContainer.js：

<SideMenuRow onClick={this.props.changeInfoList(genInfoElement.name)}>

以下是涉及方法和状态的App.js代码的相关部分：

  constructor(props) {
    super(props);
    this.state = {
      genInfoList: [],
      groupedObjectsList: [],
      cardInfo: {
        name: data[0].name
      },
      data: []
    };
  }
  changeInfoList(rowName){
    //change the card rendered based on which row is clicked
    this.setState({
      cardInfo: {
        name: rowName
      }
    })
  }

我构建这个不允许 setState 工作的方法的方式有什么不正确？

Answer 1

您收到此错误是因为关键字 this 未指向组件的执行上下文，并且其当前执行上下文没有名为 setState()

您可以通过几种方式解决此问题：

1( 定义如下所示的箭头函数：

  const changeInfoList = (rowName) => {
    //change the card rendered based on which row is clicked
    this.setState({
      cardInfo: {
        name: rowName
      }
    })
  }

通过使用箭头函数(不绑定this(，this关键字现在指向最近的对象，在本例中为类组件，该组件具有setState((方法。

2( 将当前函数绑定到组件的构造函数中。

 constructor(props) {
    super(props);
    this.state = {
      genInfoList: [],
      groupedObjectsList: [],
      cardInfo: {
        name: data[0].name
      },
      data: []
    };
 this.changeInfoList = this.changeInfoList.bind(this)
  }

这会显式地告诉您的函数，这现在指向类组件的上下文。

现在假设您执行了以下任一步骤，则必须将 changeInfoList 传递到子组件中：

在应用中.js：

<SideMenuContainer changeInfoList={this.changeInfoList} genInfoList={this.state.genInfoList} groupedObjectsList={this.state.groupedObjectsList}/>

在侧边菜单容器中：

<SideMenuRow onClick={() => { this.props.changeInfoList(genInfoElement.name) }}>

Answer 2

 constructor(props) {
    super(props);
    this.state = {
      genInfoList: [],
      groupedObjectsList: [],
      cardInfo: {
        name: data[0].name
      },
      data: []
    };
// Bind the function
this.changeInfoList = this.changeInfoList.bind(this)
  }
  changeInfoList(rowName){
    //change the card rendered based on which row is clicked
    this.setState({
      cardInfo: {
        name: rowName
      }
    })
  }