重新装入reactjs组件

Question

我有我的反应的应用程序两个部分组成，从一个API获取数据。一个接收图像和其他的文字。

我有我的页面底部的按钮，我想用它来刷新这两个部件。

它应该表现得像刷新整个页面，但我相信这是不是最好的方式，因为我使用组件。

我已经找到了几个解决方案说更新了密钥，但不适合我的问题。我必须先重建我的部件，因此将执行从外部api`s的HTTP请求。

我会用组件为例之一，因为他们是非常相似的：

componentDidMount() {

axios.get("https://dog.ceo/api/breeds/image/random")
  .then(res => {
      console.log(res)
    this.setState({wiseDog:res.data.message})
    this.setState({isLoading:false})
})
  .catch( err => {
    this.setState({error:err.data.message})
  })

}

当组件安装，我渲染wiseDog状态（这是我的图片链接）的HTML和它的作品。从我的页脚部分，我想点击一个按钮，这会是一个新的请求更新的图像。

 <Fragment>
  <CssBaseline />
  <AppBar position="fixed" color="primary" className={classes.appBar}>
    <Toolbar className={classes.toolbar}>
      <Fab color="secondary" aria-label="Add" className={classes.fabButton}>
        <Refresh />
      </Fab>
    </Toolbar>
  </AppBar>
</Fragment>

该按钮是<Refresh/>

有谁知道我可以搜索或试图解决？

Answer 1

你可以把代码的API调用的函数，componentDidMount和FAB的onClick时调用它。

class MyComponent extends React.Component {

componentDidMount(){
    this.requestUpdate();
}

requestUpdate = () => {
    // Make API call here and 'setState' when it completes
};

render(){
    return (
         <Fragment>
             <CssBaseline />
             <AppBar>
                 <Toolbar>
                     <Fab onClick={this.requestUpdate}>
                         <Refresh />
                    </Fab>
                 </Toolbar>
             </AppBar>
         </Fragment>
    );
}
}

Answer 2

你刷新组件将达到同样的API，并保存在本地状态的响应，并通过父组件传递状态道具其他子组件，并再次渲染图像和文字。