Блог

Главная - Вопросы по программированию - Аномальное поведение крючка с эффектом реакции

Аномальное поведение крючка с эффектом реакции

#reactjs #react-hooks #use-effect #use-state

Вопрос:

Я сталкиваюсь с ненормальным выводом в браузере из React при использовании крючка useEffect. Я бы попросил вас, пожалуйста, взглянуть на код. Вы можете скопировать и вставить код в любую онлайн-среду разработки, поддерживающую React, чтобы визуализировать поведение браузера. Я хочу, чтобы счетчик увеличивался каждые 1 секунду. Но с кодом он застревает после 10.

 import { useState, useEffect } from "react";

function App() {
  const initialState = 0;
  const [count, setCount] = useState(initialState);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count   1);
    }, 1000);

    // return () => {
    //   clearInterval(interval);
    // };
  }, [count]);

  return (
    <div className="App">
      <h1>{count}</h1>
    </div>
  );
}

export default App;

Я хочу знать причину этого. Почему это происходит?

Но когда я выполняю очистку с помощью useEffect для выполнения функции componentWillUnmoint (), она ведет себя нормально и отображает счетчик каждую секунду правильно. Я намеренно прокомментировал очистку части кода useEffect.

Комментарии:

1. Почему происходит то, что происходит?

2. Я хочу, чтобы счетчик увеличивался каждые 1 секунду. Но с кодом он застревает после 10.

3. почему вы хотите каждый раз повторять его?

Ответ №1:

Вы добавляете интервал при каждом рендеринге, и достаточно скоро ваш поток будет перегружен интервалами.

Я предполагаю, что вы хотели запустить один интервал, это делается путем удаления закрытия count , передав функцию задатчику состояния («функциональное обновление»):

 import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount   1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div className="App">
      <h1>{count}</h1>
    </div>
  );
}

export default App;
Метки: