React子组件调用父组件方法时this.setState报错求助

报错“this.setState is not a function”的核心原因是父组件中checkClose方法的this指向丢失。当你直接把this.checkClose传递给子组件时，方法脱离了父组件的上下文，调用时this不再指向父组件实例，自然找不到setState方法。

下面是三种可行的解决方法：

方法1：在构造函数中绑定this #

在父组件的构造函数里，把checkClose方法的this绑定到当前组件实例：

export default class Todo extends Component {
   constructor(props){
    super(props)
    this.state = { 
      propBottomMenu : false
    }
    this.bottomRef = React.createRef()
    // 绑定this到组件实例
    this.checkClose = this.checkClose.bind(this);
  };
  checkClose(){
    this.setState({propBottomMenu : false})
  }
  // 其余代码保持不变
}

方法2：用箭头函数定义方法 #

箭头函数会自动继承当前上下文的this，直接把checkClose改成箭头函数形式：

export default class Todo extends Component {
   constructor(props){
    super(props)
    this.state = { 
      propBottomMenu : false
    }
    this.bottomRef = React.createRef()
  };
  // 箭头函数自动绑定this
  checkClose = () => {
    this.setState({propBottomMenu : false})
  }
  // 其余代码保持不变
}

方法3：传递时用箭头函数包裹 #

在传递给子组件的地方，用箭头函数包裹checkClose调用，确保this指向父组件：

{this.state.propBottomMenu ? 
  <BottomMenu bSheetRef={this.bottomRef} checkClose={() => this.checkClose()} style={styles.bottomMenu} /> 
  : null}

注意：方法3虽然简单，但如果子组件是纯组件（PureComponent），每次传递新的箭头函数会触发子组件不必要的重渲染，因此更推荐前两种方法。

内容的提问来源于stack exchange，提问作者Vrm