Как запустить React useEffect только один раз и состояние обновления свойства с помощью setState - PullRequest
Новая
       5

Как запустить React useEffect только один раз и состояние обновления свойства с помощью setState

0 голосов
/ 12 июня 2019

Следующий функциональный компонент React запускает ловушку useEffect дважды, даже если в качестве второго аргумента передается пустой массив [], а компонент добавляется на страницу только один раз: 

const Tips = () => {
  const [idx, setIdx] = useState(0)
  useEffect(() => {
    console.log('start use effect')
    const interval = setInterval(() => {
      setIdx(idx + 1)
    }, 1000)
  }, []) // empty array: run effect only once
  return <>{idx}</>
}

Как сделатьуверены, что интервал запускается только один раз внутри функции обратного вызова useEffect?

Кроме того, состояние idx обновляется только один раз, компонент выводит 0 и позже 1. Как изменить компонент так, чтобы счетчик idx продолжал увеличиваться?

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Этот код будет делать то, что вам нужно: 

const Tips = () => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    console.log("start use effect");
    const interval = setInterval(() => {
      setIdx(idx=>idx + 1);
    }, 1000);
    return ()=>clearInterval(interval)
  }, []); // empty array: run effect only once
  return <>{idx}</>;
};

хитрость здесь setIdx(idx=>idx + 1).Вместо setIdx(idx + 1).Поскольку useEffect запускается один раз, обработчик интервала создает замыкание по исходному значению idx, равному 0, и для каждого setIdx он просто устанавливает его в 0 + 1, а затем компонент повторно визуализируется с 1.

0 голосов
/ 12 июня 2019

useEffect вызывается только один раз, когда я пытаюсь его реализовать. Функция интервала, однако, застряла в цикле. Я думаю, что неясно, что вы хотите достичь с этим?

...