將獲取的JSON數據設置爲狀態並使用它

Question

我是React的新手，因此我試圖學習基本概念。

我通過API獲取數據我存了一些數據轉化爲學習的目的，具有像這樣爲獲取請求：

componentDidMount() { 
    fetch("myserver.com/api/a/1") 
    .then(function(response) { 
     response.json() 
    }) 
} 

，在我的構造函數中我設置狀態數據：「假」：

constructor(props) { 
    super(props) 

    this.state = {data: 'false'}; 
} 

但是從這裏開始我就迷路了。我通過API獲取JSON對象中的三個不同字符串，但我不知道如何訪問它們。我已經嘗試在componentDidMount中設置setState，但我遇到了大量的錯誤。

在這樣的情況下你會怎麼做？我應該在哪裏設置狀態，以及您通常如何訪問/遍歷JSON對象？

在此先感謝！

Answer 1

嘗試這樣：

 export default class YourComponent extends React.Component { 

     constructor(props) { 
      super(props) 

      this.state = {data: 'false'}; 
     } 

     componentDidMount() { 
       this._getData(); 
     } 


     _getData =() => { 
       fetch("myserver.com/api/a/1") 
       .then(response => { 
        if (response.ok) { 
        return response; 
       } else { 
       let errorMessage = 
        `${response.status(${response.statusText})`, 
        error = new Error(errorMessage); 
        throw(error); 
       } 
       }) 
       .then(response => response.json()) 
       .then(json =>{ 
        console.log(json); 
        this.setState({ data: json.data }) 
       }); 
      } 

      render() { 
       return (
       <div> 
        { 
        this.state.data && 
        this.state.data.map((item, key) => 
         <div key={key}> 
         {item} 
         </div> 
        )} 
       </div> 
     )} 
    }