如何重新渲染子组件？

Question

加载（子项）将向父组件发送一个值，然后将其设置为状态并向下传递给后退按钮（子项）。

后退按钮（子级）在单击时会将道具返回给父级。父级将根据返回值设置状态，然后将其传回给Load（子级）组件。

问题：对于几次单击，它工作正常，但随后停止了重新渲染“加载（子）”组件。父日志显示它正在从“后退按钮”（子按钮）接收数据，但不知何故它不显示“加载”中的日志。

父母：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadDirs: '',
      backDirs: ''
    }
  }  

getLoad = (info) => {
    this.setState({ loadDirs: info });
  }

  goBack = (instruct) => {
    this.setState({ backDirs: instruct },
      () => { console.log(this.state.backDirs) });
  }

render() {

   return (
          <div> 
             <Backbutton dirs={this.state.loadDirs} backbutton={this.goBack} />
              <Load backload={this.state.backDirs} load={this.getLoad} />  
           </div>
       );
     }
}

后退按钮（孩子）：

class Backbutton extends Component {
    constructor({props, dirs}) {
        super(props, dirs);
    }

    prevLink(info) {
        let backlink = info.toString().substr(0, info.toString().lastIndexOf('/') + 0);
        console.log(backlink);
        this.props.backbutton(backlink);
    }


    render() {

        return (
            <button key={this.props.dirs} 
            onClick={() => { this.prevLink(this.props.dirs) }}>
            Back</button>

        )
    }
}


export default Backbutton;

加载（子项）：

....
  componentDidUpdate(prevProps) {
  if (this.props.backload !== prevProps.backload) {
    console.log(this.props.backload)
    this.allFetch(this.props.backload);
  }
}
....

已编辑： 我现在有几个问题：

1）我现在正在使用Refs（引用）从父级调用子方法，并且我的应用程序按预期运行。但是我在react docs中读到应该避免引用。我真的不应该使用裁判吗？

2）由于componentDidUpdate对我不起作用。谁能指导我找到更好的替代方法，或者为什么它不起作用？

我不知道为什么，单击几次后，parent在使用componentDidUpdate时突然停止重新渲染子组件，所以我最终使用了refs，因为我想每次通过单击按钮更改数据时都触发获取API方法。