React.js this2.setState не является функцией? - PullRequest
0 голосов
/ 25 февраля 2019

Я пытаюсь получить данные о покемонах из API покемонов, моя проблема - отрисовка моего состояния.я получаю TypeError: _this2.setState is not a function и не знаю почему.Должен ли я делать этот вызов извлечения вне функции componentDidMount?Я новичок, чтобы реагировать и просто пытаюсь учиться.

import ReactDOM from "react-dom";
import styled from "styled-components";

import "./styles.css";

class App extends Component {
  state = {
    allPokemon: []
  };

  componentDidMount() {
    let images = [];
    async function fetchPokeMonData() {
      const response = await fetch("https://pokeapi.co/api/v2/pokemon");
      const data = await response.json();
      return await Promise.all(
        data.results.map(async pokemon => {
          const response = await fetch(pokemon.url);
          const pokemonData = await response.json();

          console.log(
            pokemonData.id,
            pokemonData.name,
            pokemonData.sprites.front_default
          );
          this.setState({
            allPokemon: {
              id: pokemonData.id,
              name: pokemonData.name,
              sprite: pokemonData.sprites.front_default
            }
          });

          return images;
        })
      ).catch(err => {
        console.error(err);
      });
    }
    fetchPokeMonData();
  }

  render() {
    return <StyledApp>{console.log(this.images)}</StyledApp>;
  }
}

const StyledApp = styled.div`
  height: 100vh;

  background: linear-gradient(
    to right,
    #8e9eab,
    #eef2f3
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  padding: 30px;
`;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Я делаю это в URL кодов и ящиков здесь https://codesandbox.io/s/w6momrq41k

Заранее спасибо.

...