Как визуализировать данные из ответа API в React?

Question

как инициализировать ответ от API к переменной, чтобы я мог использовать его в моей функции render()? Почему component.setState не работает? Ошибка:
Uncaught TypeError: Не удается прочитать свойство 'имя пользователя' неопределенных (...)

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

Answer 1

Причина заключается в том, что на первом рендеринга "this.state.data [0] .username" не set, пока ответ не вернется из вызова API.

Нечто подобное в методе визуализации должно работать:

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


     </div> 
    ); 
    }