Как отловить момент пробрасывания данных из родительской компоненты в дочернюю?

Question

[chatterbox777]

Получается передаю через пропсы из родительского компонента (App.jsx) в дочерний компонент (Ability.jsx) данные через пропсы, однако сначала передается первое значение этих данных которое равняется пустому объекту, а лишь потом передается конечное состояние которое мне и требуется получить массив с объектами.... так вот , Проблема заключена в том, что мне нужен только тот объект, в котором есть подобъект со вложенностью language => name => "en"... я пытаюсь найти этот объект с помощью метода массивов find.... однако так как сначала приходит пустой объект - мне выбрасывается ошибка мол не могу выполнить такой метод на пустом объекте...

Что надо прописать, чтобы улавливались не изнчальные данные (пустой объект) а уже конечные (массив с объектами)

import React, { useEffect } from "react";
import { NavLink } from "react-bootstrap";
import styles from "./Ability.module.css";
const Ability = ({ ability }) => {
  console.log(ability);

  let text;
  const getNeededLanguageText = () => {
    if (!Object.keys(ability).length === 0) {
      ability.find((el, index) => {
        return el.language.name === "en";
      });
    }
  };
  useEffect(() => {
    text = getNeededLanguageText();
  }, []);

  console.log(text);
  // остановился на том что приходят две языковых версии текста абилок... надо придумать как будет отображаться именно английская..
  return (
    <div>
      <div className="container">
        <div className="row">
          <div className="col-lg-12">
            {/* <p>{ability.effect}</p>
            <p>{ability.short_effect}</p> */}
          </div>
          <div className="col-lg-12">
            <NavLink to="/pokemon">Вернуться назад</NavLink>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Ability;

Answer 1

[chatterbox777]

Решил проблему вот так

spoiler

import React, { useEffect, useState } from "react";
import { NavLink } from "react-bootstrap";
import styles from "./Ability.module.css";
const Ability = ({ ability }) => {
  console.log(ability);

  const [state, setstate] = useState({});

  useEffect(() => {
    console.log("RENDERED");
    if (Array.isArray(ability)) {
      console.log("выполняется поиск");

      const neededText = ability.find((el, index) => {
        return el.language.name === "en";
      });
      setstate({ neededText });
    }
  }, [ability]);

  console.log(state);
  // остановился на том что приходят две языковых версии текста абилок... надо придумать как будет отображаться именно английская..
  return (
    <div>
      <div className="container">
        <div className="row">
          {state.neededText && (
            <div className="col-lg-12">
              <p>{state.neededText.effect}</p>
              <p>{state.neededText.short_effect}</p>{" "}
            </div>
          )}

          <div className="col-lg-12">
            <NavLink to="/pokemon">Вернуться назад</NavLink>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Ability;

короче надо было проверять на существование Array + поставить зависимость в useEffect....

Comments

[Zhanna_K]

Была такая же ситуация, кроме такого же способа проверки наличия массива в пропсах пока ничего не придумала:)