javascript - How to render data from API response in React? - Stack Overflow

admin管理员组

文章数量:1333210

how to initialize response from API to variable so I can use it in my render() function? Why ponent.setState is not working? Error:
Uncaught TypeError: Cannot read property 'username' of undefined(…)

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

  ponentDidMount() {
var ponent = this;


      fetch('')
          .then(function(response) {
              return response.json()
          }).then(function(json) {
              var data = json;
              console.log(data[0]);
              console.log(data[0].username);
              ponent.setState({
                  data: json
              })
          })

  }




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


      </div>
    );
  }
}

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

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

how to initialize response from API to variable so I can use it in my render() function? Why ponent.setState is not working? Error:
Uncaught TypeError: Cannot read property 'username' of undefined(…)

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

  ponentDidMount() {
var ponent = this;


      fetch('https://fcctop100.herokuapp./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);
              ponent.setState({
                  data: json
              })
          })

  }




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


      </div>
    );
  }
}

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

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

• javascript
• reactjs
• fetch-api

Share Improve this question Follow edited Mar 17, 2022 at 9:42 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Nov 14, 2016 at 16:59 KATKAT 5311 gold badge22 silver badges88 bronze badges 2

• You should have a guard statement / ternary operator in your render method if you plan on using some data that will arrive at a later time. Something like this: var someData = this.state.data[0].username || ""; – Justin Herter Commented Nov 14, 2016 at 17:07
• @JustinHerter console.logs in fetch logs proper data – KAT Commented Nov 14, 2016 at 17:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The reason is that on first render this "this.state.data[0].username" is not set, until the response es back from the API call.

Something like this in your render method should work:

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


      </div>
    );
  }

本文标签： javascriptHow to render data from API response in ReactStack Overflow