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

Question

[Mdmitr]

Как сбросить состояние по кнопке одновременно в двух дочерних компонентах
ссылка на 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>
  );
};

Comments

[n1ksON]

я храню первоначальные данные в отдельном файле с константами. самому всегда интересно было, как сбрасывать state

Answer 1

[Максим Анциферов]

Если возникает такая проблема, то нужно выносить данные на уровень выше (в данном случае в App, плюс можно использовать контексты) или использовать state manager (effector,redux,mobx)

Comments

[Mdmitr]

вынести состояние выше не проблема
как тогда хуки без зависимостей обновлять?

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

[Максим Анциферов]

Mdmitr, обновлять хуки? Может фетчить данные при маунте компонента?

[Mdmitr]

Максим Анциферов, точнее перезапустить useEffect

[Максим Анциферов]

Я бы начал с этого, а в дальнейшем вынес бы это в state manager, с чистыми компонентами удобнее работать

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

export default function App() {
  const [jokesList, setJokesList] = useState([]);
  const [randomJoke, setRandomJoke] = useState("");

  const addJoke = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${jokesList.length + 1}`)
      .then((res) => res.json())
      .then((data) => setJokesList([...jokesList, data.title]));
  }
  const getRandomJoke = () => {
    fetch("https://api.chucknorris.io/jokes/random?category=sport")
      .then((res) => res.json())
      .then((data) => setRandomJoke(data.value));
  };
  const handleReset = () => {
    getRandomJoke();
    setJokesList([]);
  }

  useEffect(() => {
    getRandomJoke();
  }, []);

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

[Mdmitr]

Максим Анциферов, код работает но проблемы с использование зависимостей useEffect

[Максим Анциферов]

Mdmitr, какие именно проблемы?

[Mdmitr]

Максим Анциферов, сюда нужно добавить вызов функции addJoke а то не заработает при первом вызове а после линт будет просить добавить эту функцию в зависимость

useEffect(() => {
    getRandomJoke();
addJoke()
  }, []);

[Максим Анциферов]

Mdmitr, не нужно добавлять функции в зависимости этого эффекта, иначе этот эффект будет вызываться будет при каждом рендере
В зависимости нужно передавать только то, при изменении чего нужно вызывать эффект, а пустой массив означает то, что эффект запустится только раз при монтировании элемента и все

[Mdmitr]

Максим Анциферов, а как мне тогда получить данные от апи не нажимая на кнопку?

[Максим Анциферов]

Вот так

useEffect(() => {
    getRandomJoke();
    addJoke()
  }, []);

[Mdmitr]

Максим Анциферов, да но теперь реакт ругается и требует добавить в зависимость addJoke()

[Максим Анциферов]

Чтоб не было ворнига, можно инициализацию jokesList вынести в отдельную функцию, которая не будет использовать этот самый jokesList

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

export default function App() {
  const [jokesList, setJokesList] = useState([]);
  const [randomJoke, setRandomJoke] = useState("");

  const initJokesList = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${1}`)
      .then((res) => res.json())
      .then((data) => setJokesList([data.title]));
  }
  const addJoke = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${jokesList.length + 1}`)
      .then((res) => res.json())
      .then((data) => setJokesList([...jokesList, data.title]));
  }
  const getRandomJoke = () => {
    fetch("https://api.chucknorris.io/jokes/random?category=sport")
      .then((res) => res.json())
      .then((data) => setRandomJoke(data.value));
  };
  const handleReset = () => {
    getRandomJoke();
    setJokesList([]);
  }

  useEffect(() => {
    getRandomJoke();
    initJokesList();
  }, []);

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

[Mdmitr]

Максим Анциферов, в этом коде тоже баг есть, отмечу твой ответ решением
если очень внимательно посмотреть на код то будет видно где ошибка