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

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//..."
    }
}

所以在我的 return 中，如果我这样做：

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

它正在工作，我会得到 "Alexander"，但如果添加图像 url:

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

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

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

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

Answer 1

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

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

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

Can't fetch data object entirely in react, most likely due to of fetch call delay

reactjs

react-native

wordpress-gutenberg