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

Question

[chatterbox777]

Здравствуйте, уважаемые, прошу помощи... разбираюсь в хуках.... проблема в том, что при пробрасывании стейта родительского компонента (род.комп => 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;

Answer 1

[Александр]

1. В возвращаемой функции useEffect'ом отменяйте axios запрос.
2. Как выглядит selectedPokemon?

Comments

[chatterbox777]

как то так

[Александр]

chatterbox777, Ошибки то исправились?

[chatterbox777]

Александр, по итогу варнинги ушли когда я в дочернем элементе , куда я пробрасывал данные через пропсы из родительского элемента , проставил проверку на undefined... мол если undefined не отрисовывай, иначе отрисуй.... и все... варнинги прошли))

Answer 2

[chatterbox777]

1. В возвращаемой функции useEffect'ом отменяйте axios запрос.

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

Comments

[chatterbox777]

короче решил проблему тем, что прописал условие в pokemon что если props.selectedPokemon.serverPokemonInfo не существует (undefined) то отрисовываем пустой див иначе отрисовываем уже див с необхордимыми данными из props.selectedPokemon.serverPokemonInfo