Я пытаюсь получить данные о покемонах из 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
Заранее спасибо.