@chatterbox777

Не пробрасываются данные в компонент из за неработающего useEffect'a?

Здравствуйте, уважаемые, прошу помощи... разбираюсь в хуках.... проблема в том, что при пробрасывании стейта родительского компонента (род.комп => App) ( в моем случае пробрасываю selectedPokemon) в дочерний (доч. комп. Pokemon) выскакивают следующие ошибки :
1) Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
2) Uncaught TypeError: Cannot read property 'sprites' of undefined ( at Pokemon (Pokemon.jsx:12) )

я почитал и понял что ошибка в том что useEffect не отписывается и происходит утечка памяти.. вроде прописал условие в useEffect чтобы работало как надо, но не работает по итогу... подскажите в чем моя ошибка? спасибо!

App.jsx

import React, { useEffect } from "react";
import "./App.css";
import { connect } from "react-redux";
import * as axios from "axios";
import { Button, Card } from "react-bootstrap";
import { useState } from "react";
import { BrowserRouter, NavLink, Route } from "react-router-dom";
import Pokemon from "./Pokemon/Pokemon";

function App({ count }) {
  const [pokemons, setPokemons] = useState([]);
  const [selectedPokemon, setSelectedPokemon] = useState({});
  console.log("pokemons =>", pokemons);
  useEffect(() => {
    let isSubscribed = true;

    axios.get("https://pokeapi.co/api/v2/pokemon").then((response) => {
      if (isSubscribed) {
        let pokemons = response.data.results;
        setPokemons(pokemons);
      }
    });

    return () => (isSubscribed = false);
  }, []);

  let getPokemonInfo = (pokemon, id, url) => {
    // let pokemonName = pokemon;
    // let pokemonId = id;
    axios.get(url).then((response) => {
      const serverPokemonInfo = response.data;
      setSelectedPokemon({ ...pokemon, id, serverPokemonInfo });
    });
  };
  console.log("выбранный покемон =>", selectedPokemon);
  return (
    <BrowserRouter>
      <div className="App">
        <div className="container">
          <div className="row">
            {pokemons.map((pokemon, index) => (
              <div key={index} className="col-lg-4 mt-lg-4">
                <Card style={{ width: "18rem" }}>
                  <Card.Img
                    variant="top"
                    src="https://htstatic.imgsmail.ru/pic_original/14dda5f3f885a7304a22af4635aa54b0/1658985/"
                  />
                  <Card.Body>
                    <Card.Title>{pokemon.name}</Card.Title>
                    <Card.Text>
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </Card.Text>
                    <NavLink to={`/pokemon/${index + 1}`}>
                      {" "}
                      <Button
                        onClick={() =>
                          getPokemonInfo(pokemon, index + 1, pokemon.url)
                        }
                        variant="primary"
                      >
                        Get more info
                      </Button>
                    </NavLink>
                  </Card.Body>
                </Card>
                <Route path={`/pokemon/${index + 1}`}>
                  <Pokemon
                    selectedPokemon={selectedPokemon}
                    index={index + 1}
                  />
                </Route>
              </div>
            ))}
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

const mapStateToProps = (state, ownProps) => {
  console.log(state);
  return { count: state.count };
};

export default connect(mapStateToProps)(App);


Pokemon.jsx

import React from "react";
import { Card } from "react-bootstrap";
import styles from "./Pokemon.module.css";

const Pokemon = (props) => {
  console.log(props);
  return (
    <div className={styles.pokemonInfo}>
      <Card>
        <Card.Img
          variant="top"
          src={props.selectedPokemon.serverPokemonInfo.sprites.front_default} //  Pokemon.jsx 12
        />
        <Card.Body>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
        </Card.Body>
      </Card>
      <br />
      <Card>
        <Card.Body>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
        </Card.Body>
        <Card.Img variant="bottom" src="holder.js/100px180" />
      </Card>
    </div>
  );
};

export default Pokemon;

  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle
Помог - отметь решением \( ゚ヮ゚)/
1. В возвращаемой функции useEffect'ом отменяйте axios запрос.
2. Как выглядит selectedPokemon?
Ответ написан
@chatterbox777 Автор вопроса
1. В возвращаемой функции useEffect'ом отменяйте axios запрос.

как это сделать? 0о и плюс я думаю уже пересмотрев свою проблему, что useEffect Тут не причем, так как данные идут из функции getPokemonInfo ... скорее всего там что то с асинхронностью не так.. но мне поучему то очень сложно дается тема асинхронности
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы