如何在React中渲染來自API響應的數據？

如何初始化從API到變量的響應，以便我可以在我的render()函數中使用它？爲什麼component.setState不工作？錯誤：
遺漏的類型錯誤：未定義無法讀取屬性「用戶名」（......）如何在React中渲染來自API響應的數據？

class Main extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     data: 23 
    }; 
} 

    componentDidMount() { 
var component = this; 


     fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime') 
      .then(function(response) { 
       return response.json() 
      }).then(function(json) { 
       var data = json; 
       console.log(data[0]); 
       console.log(data[0].username); 
       component.setState({ 
        data: json 
       }) 
      }) 

    } 




    render() { 
    return (
     <div> 
     <h1>elo{this.state.data[0].username}</h1> 


     </div> 
    ); 
    } 
} 

const docs = document.getElementById('root'); 

ReactDOM.render(<Main/> , docs);

來源

2016-11-14 KAT

你應該有一個後衛聲明/三元運營商在渲染方法，如果你打算使用一些數據，這將在稍後的時間到達。就像這樣：var someData = this.state.data [0] .username || 「」; –

@JustinHerter console.logs在獲取日誌中記錄正確的數據 – KAT

的原因是，在第一次使這個「this.state.data [0] .username」不設置，直到響應從API調用返回。

像這樣的事情在你的渲染方法應該工作：

render() { 
    var someData = this.state.data[0].username || ""; 
    return (
     <div> 
     <h1>elo{someData}</h1> 


     </div> 
    ); 
    }

來源

2016-11-14 17:14:41

當我把變量放在return語句中時，我收到了解析錯誤。 'SyntaxError：解析文件時意外的標記（39：6）' 我在我的gulpfile中使用browserify + babelify – KAT

@KAT抱歉，我錯誤地將聲明移到了返回函數之外。 –

如何在React中渲染來自API響應的數據？

回答

相關問題