Question

我正在尝试使用不同的JSON复制相同的代码here，但是数据没有加载。

请帮助，我不确定代码中缺少什么。

import React from 'react';

export default class ItemLister extends React.Component {
    constructor() {
        super();
        this.state = { items: [] };
    }

    componentDidMount() {
  fetch('http://media.astropublications.com.my/api/drebar_landing.json')
      .then(result=>result.json())
      .then(items=>this.setState({items}));
    }

    render() {
      return(
        <ul>
            {this.state.items.length ?
              this.state.items.map(item=><li key={item.id}>{item.Title}</li>) 
              : <li>Loading...</li>
            }
        </ul>
     )
    }
  }

Answer 1

您的api响应包含一个对象ArticleObject，而ArticleObject具有对象数组，因此您需要将items.ArticleObject设置为状态。

请看下面的解决方案以更好地了解

componentDidMount() {
  fetch('http://media.astropublications.com.my/api/drebar_landing.json')
      .then(result=>result.json())
      .then(items=>this.setState({items:items.ArticleObject}));
    }

来自React组件的REST调用

1 个答案: