React子组件调用父组件方法修改state不生效问题求助

问题原因 #

1. Props属性名不匹配 #

父组件给子组件EditCert传递的回调属性名为handler，但子组件中调用时写的是myprops.handleFilters()，属性名不一致导致根本没有触发父组件的方法。

2. 父组件方法this指向丢失 #

你在父组件中定义的handlerFilters是普通函数写法，直接作为Props传递时，方法内部的this不会指向父组件实例，就算调用路径正确也会因this.setState不存在而执行失败。

修复方案 #

1. 先修复父组件方法的this指向，二选一即可：

   • 方案A：将普通函数改写为箭头函数，自动绑定父组件实例的this

   handlerFilters = () => {
     this.setState({
       edit: false
     });
   }
   

   • 方案B：在父组件构造函数中手动绑定this

   constructor(props: ICertificatesListProps) {
     super(props);
     this.handlerFilters = this.handlerFilters.bind(this);
   }
   

2. 修正子组件的回调调用属性名，将子组件的ExitHandler方法修改为：

   function ExitHandler() {
       myprops.handler();
   }
   

修改完成后即可正常触发父组件的状态更新，切换回主内容展示。

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