Обновите модальное значение с помощью данных ответа сервера в React-Semantic UI

Question

У меня есть несколько гиперссылок с некоторым идентификатором.когда ссылка нажата, я должен показать символ загрузки в модальном режиме, и мне нужно сделать аксиозвонок.Как только API вернет данные, я должен обновить результат в том же режиме.

ниже мой код

class App extends React.Component {
   renderContent() {
     return (
       // This data generated using map function
       <Modal trigger={<a onClick={() => this.generateAppJson("1") }>Generate App JSON</a> } basic size='small'>
         <Header icon='spinner loading' content='Get the name' />
         <Modal.Content>
           <p>Loading...</p> {/* Here I have to update the content that received form  generateAppJson() function*/}
         </Modal.Content>
       </Modal>

       <Modal trigger={<a onClick={() => this.generateAppJson("2") }>Generate App JSON</a> } basic size='small'>
         <Header icon='spinner loading' content='Get the name' />
         <Modal.Content>
           <p>Loading...</p> {/* Here I have to update the content that received form  generateAppJson() function*/}
         </Modal.Content>
       </Modal>
     )
   }

  generateAppJson(id) {
    console.log(id)
    // Here I'll make axios call and I have to update the result in the same model
  }

  render() {
    return (
      <Segment>
        {this.renderContent()}
      </Segment>
    );
  }
}

Ссылка в песочнице: https://codesandbox.io/embed/pm6knmr37j

В настоящее время, Когда я нажимаю на ссылку, открывается модальный и показывает загрузочный текст.Но как мне обновить модальное содержимое после получения данных из API в generateAppJson()

Кроме того, я хочу только один модальный, который должен вызывать для всех гиперссылок.В настоящее время, Как я могу выйти из цикла и звонить, когда ссылка нажата?

Answer 1

Вам необходимо сохранить возвращаемые данные Axios в состояние компонента, которое автоматически обновит ваше приложение.

Итак, во-первых, вам нужно обновить состояние компонента, когда ваш вызов Axios вернул:

  async generateAppJson(id) {
    const results = await axios.post(someurl, id);
    // this line will cause a rerender
    this.setState({results})
  }

Затем вам нужно инициализировать состояние в вашем компоненте:

class App  extends React.Component {
   state = { results: [] }

Затем вам нужно проверить состояние в вашей функции рендеринга:

<Modal.Content>
    { !this.state.results.length && <p>Loading...</p>}
    { this.state.results.length &&
        this.state.results.map(result => <someothercomponent key={result} /> )
    }
</Modal.Content>