@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>
  );
};
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

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

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