Question

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

按钮是<Refresh/>

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

Answer 1

您可以将API调用的代码放入函数中，并在该FAB的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>
    );
}
}

Answer 2

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

重新安装reactjs组件

2 个答案: