Javascript 重新安装reactjs组件

我的react应用程序中有两个组件，它们从API获取数据。 一个接收图像，另一个接收文本

我在页面底部有一个按钮，我想用它来刷新这两个组件

它的行为应该类似于刷新整个页面，但我相信这不是最好的方式，因为我正在使用组件

我已经找到了一些解决方案来更新密钥，但这不适合我的问题。 我必须首先重建我的组件，以便它能够处理来自外部api的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})
  })

}

当安装组件时，我在html上呈现wiseDog状态（这是我的图像链接），它可以工作。 从我的页脚组件，我想点击一个按钮，这将做一个新的请求更新图像

 <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>

按钮是

---

有人知道我可以搜索什么或尝试解决什么吗？

您可以将API调用的代码放在一个函数中，并在该函数的

componentDidMount

和

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>
    );
}
}

类MyComponent扩展了React.Component{ componentDidMount（）{ this.requestUpdate（）； } 请求更新=（）=>{ //在此处进行API调用，并在完成时进行“setState” }; render（）{ 返回( ); } }

---

刷新组件将命中相同的API并将响应保存在本地状态，并通过父组件将该状态作为道具传递给另一个子组件，然后再次渲染图像和文本

因此，如果我理解您的意思，最好有一个助手方法来执行API调用，这样我也可以在刷新按钮中重用它？例如，该助手方法会将新状态发送到我的组件。。。这就是你的建议吗？是的，你必须这样做。因为你不能从其他子组件设置子组件的状态，所以你必须将该值传递给你的组件。我可以将其用作帮助方法并导出该函数以在我的组件和我的刷新按钮所在的组件上使用吗？@Fix3r Yes，但是，您也需要将

setState

传递给该函数。