时间戳

首页 > 解决方案 > 无法在反应中完全获取数据对象，很可能是由于获取调用延迟

reactjs - 无法在反应中完全获取数据对象，很可能是由于获取调用延迟

问题描述

我正在尝试获取有关作者的 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>

它正在工作，我会得到“Alexander”，但如果添加图片网址：

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

我会得到一个错误Cannot read property '24' of undefined。据我了解，获取有一些延迟，这就是我收到错误的原因。

如何添加处理期望？抱歉，在 React 中我是初学者。

PS 这实际上是 Gutenberg 编辑器，它实际上是 react，但有一些类似核心的apiFetch功能，它类似于 fetch。

标签： reactjsreact-nativewordpress-gutenberg

解决方案

正如您所说，在响应解决之前，反应变量不会出现，您只需检查它是否存在

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

推荐阅读