Блог

Песочница

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

export default function App() {
  let [button, setButton] = useState(null);
  let [num, setNum] = useState(5);

  function revealState() {
    console.log(num);
  }
  function changeState() {
    setNum(Math.random());
  }

  useEffect(() => {
    const el = (
      <button id="logStateButton" onClick={revealState}>
        Log state
      </button>
    );
    setButton(el);
  }, []);

  return (
    <>
      {button}
      <button onClick={changeState}>Change state</button>
    </>
  );
}
 

Нажатие на кнопку «Log state» успешно регистрирует num состояние. Нажатие на кнопку «Изменить состояние» успешно изменяет num состояние. Повторное нажатие кнопки «Войти в состояние» не регистрирует обновленное значение состояния — оно регистрирует старое.

1. Почему это так? Я предполагаю, что, поскольку useEffect выполняется только один раз, он ссылается только на первую revealState функцию, которая ссылается только на первую num переменную. Поскольку этого нет в return инструкции компонента, он не обновляется.
2. Какова бы ни была причина проблемы, какие есть обходные пути? Некоторые из требований:

• тег не может быть отображен непосредственно в return инструкции.
• у нас должно быть useEffect то, что есть, и у него должен быть какой-то массив dep (нежелательно, чтобы он запускался каждый раз, когда функциональный компонент выполняется повторно).
• В реальном проекте могут быть внесены некоторые важные изменения в useEffect рендеринг обратного вызова тегов — поэтому нецелесообразно повторно запускать useEffect , помещая что-то подобное num в его массив dep.

IMO, самое правильное решение — просто добавлять обновленный прослушиватель событий при каждом отображении страницы:

 useEffect(() => {
  el.onclick = onClickHandler
});
 

Прослушиватель событий всегда имеет доступ к последнему состоянию (и реквизитам). IMO, это решение более масштабируемо, чем ранее упомянутые решения — если мой прослушиватель событий должен отслеживать последние версии нескольких состояний и реквизитов, это может привести к беспорядку. При этом все, что мне нужно сделать, это добавить дополнительных слушателей в этот один обратный вызов useEffect. Мысли?

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

export default function App() {
  let [button, setButton] = useState(null);
  let [num, setNum] = useState(5);

  const revealState = useCallback(() => {
    console.log(num);
  }, [num])
  function changeState() {
    setNum(Math.random());
  }

  useEffect(() => {
    const el = (
      <button id="logStateButton" onClick={revealState}>
        Log state
      </button>
    );
    setButton(el);
  }, [revealState]);

  return (
    <>
      {button}
      <button onClick={changeState}>Change state</button>
    </>
  );
}
 

вы можете прослушать revealState в useEffect . который инициализируется только при изменении num, достигаемом с помощью useCallback. поэтому всякий раз, когда вы нажимаете кнопку, изменяется число, которое инициализирует функцию revealState и не инициализируется на других отправителях

вы должны добавить num в качестве зависимости к useEffect :

   useEffect(() => {
      const el = (
          <button id="logStateButton" onClick={revealState}>
              Log state
          </button>
      );
      setButton(el);
  }, [num]);
 

После дополнительных разъяснений по вашей проблеме, похоже, вам нужно следить как за числом, так и за состоянием HTML. Объединение кода Алана и Кишора вместе — вот решение проблемы. Поскольку useEffect отслеживает только число в ответе Алана, поэтому, если какие-либо изменения в теге не приведут к его повторному запуску. кишор также упомянул еще одно исправление, которое заключается в использовании useCallback, но то, что нужно смотреть, — это the button , а не the num . Вот так:

 const updateButton = useCallback(function (newButton) {
    setButton(newButton);
  }, [button])

useEffect(() => {
    const el = (
      <button id="logStateButton" onClick={revealState}>
        Log state
      </button>
    );
    updateButton(el)
  }, [num]);
 

Это укажет useEffect на просмотр num и вернет новое button только при button изменении состояния.