Reactjs和Pokeapi JSON

Question

我对JSON的反应和处理是新手，但是我在这里读了很多。因此，我一直试图将从pokeapi获得的JSON传递到变量中，这是我到目前为止得到的：

getPokemons=(id)=> {

    return fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`)
      .then(res => {
        if (res.ok) {
          //return res.json()
         console.log(res.json())


        }
     })
   }

我尝试过这样的方法：Return json object to render method - React.js，但没有起作用

Answer 1

您需要使用setState使API结果成为状态的一部分。通过将该组件复制到您的代码中来尝试该组件：

​

class PokemonFinder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  
  getPokemon(id) {
    fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`)
      .then(results => results.json())
      .then(data => {
        this.setState({data});
      });
  }
  
  render() {
    return <div>
      <input value={this.state.id} 
        onChange={(ev) => this.setState({
          value: ev.target.value
        })}
      />
      <button onClick={() => this.getPokemon(this.state.id)}>Get Pokemon</button>
      <div>{JSON.stringify(this.state.data, null, 2)}</div>
    </div>;
  }
}

ReactDOM.render(<PokemonFinder/>, document.getElementById('app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

​

Answer 2

你需要做如下的事情

     getPokemons=(id)=> {
       fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`)
          .then(res => res.json())
          .then(data => {
               this.setState({data}); //here you are setting data to data state variable 
          })
         .catch(err => {
             console.log(err);
         });
     }