Load（child）将向Parent组件发送一个值，然后将其设置为state并传递给Backbutton（child） .

单击后，按钮（子）将返回到父级的道具 . Parent将根据返回值设置状态，并将其传递回Load（子）组件 .

Problem: 对于几次点击，它工作正常，但随后它停止重新渲染Load（子）组件 . 父日志显示它正在从Backbutton（子）接收数据，但不知何故它不显示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);
  }
}
....

Edited: 我现在有几个问题：

1）我现在使用Refs（引用）从父级调用子方法，我的应用程序按预期工作 . 但我在反应文档中读到它应该避免refs . 我真的不应该使用refs吗？

2）因为componentDidUpdate对我不起作用 . 任何人都可以用更好的替代方案指导我，或者为什么它不起作用？

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

javascript reactjs