Задать вопрос
@Mdmitr

Как сбросить состояние к начальному React?

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

Код
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, useCallback } from "react";

export const JokeOne = () => {
  const [joke, setJoke] = useState([]);
  const [num, setNum] = useState(1);

  const addToArr = useCallback(
    (data) => {
      setJoke(() => [...joke, data.title]);
    },
    [joke]
  );

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${num}`)
      .then((res) => res.json())
      .then((data) => addToArr(data));
  }, [num]);

  const add = () => {
    setNum(() => num + 1);
  };

  return (
    <div>
      <h2>Random Joke One</h2>
      <div>
        {joke.map((item) => (
          <div>{item}</div>
        ))}
      </div>
      <button onClick={add}>Добавить</button>
    </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>
  );
};
  • Вопрос задан
  • 719 просмотров
Подписаться 1 Средний 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 1
Babayka_od
@Babayka_od
Full-stack developer
Если возникает такая проблема, то нужно выносить данные на уровень выше (в данном случае в App, плюс можно использовать контексты) или использовать state manager (effector,redux,mobx)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽