Лучший способ отображения данных из вызова API

Question

Мне было интересно, как лучше всего отобразить данные из API отдыха.

На самом деле, что я делаю:

• Вызов функции выборки из componentDidMount();
• setState для хранения моего ответа
• Проверьте с троичным, когда render() установлено или нет значение

это выглядит так:

(getcall() - функция выборки):

async componentDidMount() {
    const response= await getCall(
        `event?ref=23876186`, // this is just to illustrate
      );
    this.setState({ payload: response})
}

Затем в render() я делаю немного:

 {this.state.payload ? (
  <h1>{this.state.payload.event.name}</h1>) : ( <h1></h1>)}

Я хотя бы о вызове моей fetch функции из constructor, но странно вызывать async функцию в constructor, вы теряете цель aync.

Я представляю себе какой-то случай, как для input:

  <Input 
     type="text" 
     name="name" 
     id="name" 
     **value={this.state.event.name}**
     placeholder="Name..." 
     onChange={this.handleName}
     required
   />

Если я захочу установить для него значение, например this.state.event.name, если у меня будет 10 полей, у меня будет такой код в 10 * 2 раза больше, потому что для каждого я написал троичный.

Так каков наилучший способ отображения данных из вызова API?

Спасибо за ваши ответы

Answer 1

Вместо добавления большого числа троичных объектов, где вы проверяете, установлен ли payload, вы можете вернуть null раньше, чем метод render, если он еще не установлен.

Пример

class App extends React.Component {
  state = {
    payload: null
  };

  async componentDidMount() {
    const response = await getCall("/event?ref=23876186");
    this.setState({ payload: response });
  }

  render() {
    const { payload } = this.state;

    if (payload === null) {
      return null;
    }
    return <div>{/* ... */}</div>;
  }
}