來自React組件的REST調用

Question

我正在嘗試使用不同的JSON 在此處復制相同的代碼，但數據未加載。

請幫忙，我不確定代碼中缺少什么。

 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}));
    }