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

Question

[Mdmitr]

Как сбросить (обновить) состояние одновременно у двух дочерних компонентов?
ссылка на codesandbox

Нужно по клику на кнопку перезапустить useEffect в обоих компонентах

import React from "react";
import "./styles.css";
import { JokeOne } from "./JokeOne";
import { JokeTwo } from "./JokeTwo";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <hr />
      <JokeOne />
      <hr />
      <JokeTwo />
      <hr />
      <button>Обновить шутки</button>
    </div>
  );
}

import React, { useEffect, useState } from "react";

export const JokeOne = () => {
  const [joke, setJoke] = useState("");
  useEffect(() => {
    fetch("https://api.chucknorris.io/jokes/random?category=animal")
      .then((res) => res.json())
      .then((data) => setJoke(data.value));
  }, []);
  return (
    <div>
      <h2>Random Joke One</h2>
      <div>{joke}</div>
    </div>
  );
};


import React, { useEffect, useState } from "react";

export const JokeTwo = () => {
  const [joke, setJoke] = useState("");
  useEffect(() => {
    fetch("https://api.chucknorris.io/jokes/random?category=sport")
      .then((res) => res.json())
      .then((data) => setJoke(data.value));
  }, []);
  return (
    <div>
      <h2>Random Joke Two</h2>
      <div>{joke}</div>
    </div>
  );
};

Answer 1

[0xD34F]

Вместо двух вложенных компонентов пусть будет один. Без состояния, только отображение переданных данных:

const Joke = ({ joke, header }) => (
  <>
    <div>
      <h2>{header}</h2>
      <div>{joke?.value}</div>
    </div>
    <hr />
  </>
);

Родительский компонент - создаёт сколько надо экземпляров дочернего компонента, а загрузку данных для них выносим в функцию, которая будет использоваться в эффекте и как обработчик клика по кнопке:

function JokesList({ categories }) {
  const [ jokes, setJokes ] = React.useState([]);

  const getJokes = React.useCallback(() => {
    Promise.all(
      categories.map(n => {
        return fetch(
          `https://api.chucknorris.io/jokes/random?category=${n}`
        ).then(r => r.json());
      })
    ).then(setJokes);
  }, []);

  React.useEffect(getJokes, []);

  return (
    <div>
      {categories.map((n, i) => (
        <Joke joke={jokes[i]} header={`Random ${n} joke`} />
      ))}
      <button onClick={getJokes}>refresh jokes</button>
    </div>
  );
}

https://codesandbox.io/s/happy-edison-86gz7?file=/...

Comments

[Mdmitr]

а если fetch запросы будут к разным апи то есть
не получится все в один useState засунуть
const [jokes, setJokes] = React.useState([]);

в одном компоненте я просто добавляю шутки в массив
в другом компоненте нет

Первый компонент

 useEffect(() => {
    fetch("https://api.chucknorris.io/jokes/random?category=animal")
      .then((res) => res.json())
      .then((data) => setJoke(() => [...joke, data.value]);
  }, []);

Второй компотнент

useEffect(() => {
    fetch("https://api.chucknorris.io/jokes/random?category=sport")
      .then((res) => res.json())
      .then((data) => setJoke(data.value));
  }, []);

[0xD34F]

а если...

Mdmitr, не если. Какой вопрос - такой ответ, и другого не будет.