Невозможно получить объект данных полностью в реакции, скорее всего из-за задержки вызова выборки

Question

Я пытаюсь получить данные Wordpress Rest API об авторе.

Поэтому я использую ComponentDidMount () с состоянием:

constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
}
componentDidMount() {
    apiFetch( { path: '/wp/v2/users/1' } )
      .then(data => this.setState({ data }));
}

в моем рендере:

const { data } = this.state;

мои данные будут похожи на это:

{
    id: "2",
    name: "Alex",
    image_url: {
        24: "http//...",
        48: "http//...",
        96: "http//..."
    }
}

Так что в моем возвращении, если я сделаю это:

<div className={className}>
    {data.name}
</div>

это работает, и я получу "Александр" , но если добавить URL-адрес изображения:

<div className={className}>
    {data.name}
    <img src={data.image_url['24']} />
</div>

, я получу ошибку Cannot read property '24' of undefined. Как я понимаю, есть некоторая задержка для получения и поэтому я получаю ошибку.

Как я могу добавить ожидание обработки? Извините, но в React я новичок.

PS На самом деле это редактор Gutenberg, который на самом деле реагирует, но имеет некоторое ядро, например apiFetch, оно похоже на fetch.

Answer 1

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

<div className={className}>
    {data.name}
    { data.image_url ? (<img src={data.image_url['24']} />) : (<></>) }
</div>