Перемонтировать компонент реагирования

Question

У меня в приложении реагируют два компонента, которые получают данные из API.Один получает изображение, а другой - текст.

У меня есть кнопка внизу моей страницы, я хотел использовать ее для обновления этих двух компонентов.

Она должна вести себя как обновлениевся страница, но я считаю, что это не лучший способ, так как я работаю с компонентами.

Я нашел несколько решений, в которых говорится, что нужно обновить ключ, но это не соответствует моей проблеме.Сначала я должен перестроить свой компонент, чтобы он выполнял HTTP-запросы от внешних API.

Я буду использовать один из компонентов в качестве примера, поскольку они очень похожи:

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 и сохранит ответ в локальном состоянии и передаст это состояние в качестве реквизита другому дочернему компоненту через родительский компонент и снова отобразит изображение и текст.

Answer 2

Вы можете поместить код для вызова API в функцию и вызывать ее, когда componentDidMount и onClick этого FAB.

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