Чтение состояния компонента сразу после установки при использовании ловушки useState в реакции - PullRequest
Новая
       1

Чтение состояния компонента сразу после установки при использовании ловушки useState в реакции

0 голосов
/ 22 сентября 2019

Это console.log не работает: оно просто напечатает предыдущее значение состояния, так как set равно async. 

const SomeCompo = () => {
  const [count, set] = useState(0);
  const setFun = () => {
    console.log(count);
    set(count + 1);
    console.log(count);    
  }
  return <button onClick={setFun}>count: {count}</button>
}

Мне пришлось прочитать счет в самом рендере: 

const SomeCompo = () => {
  const [count, set] = useState(0);
  console.log(count);
  const setFun = () => {
    set(count + 1);
  }
  return <button onClick={setFun}>count: {count}</button>
}

Есть ли лучший способ прочитать значение, поскольку я не хочу консоль для каждого рендера.

Ответы [ 3 ]

4 голосов
/ 22 сентября 2019

Для этого вы можете использовать useEffect, 

useEffect(() => {
   console.log(count);
}, [count]) //[count] is a dependency array, useEffect will run only when count changes.
1 голос
/ 22 сентября 2019

Я бы предложил не использовать setInterval .Я хотел бы сделать что-то вроде useEffect.Эта функция будет вызываться каждый раз, когда вы выполняете setState.Так же, как у вас был обратный вызов после setState.Передайте состояние count в массиве, оно будет следить только за изменением состояния count и будет поддерживать ваше count. 

useEffect(() => {
 console.log(count);
}, [count]);

Также, если вам не нужно повторно отображать ваши другие компоненты,вы можете использовать useMemo и useCallback.https://www.youtube.com/watch?v=-Ls48dd-vJE

Здесь, чтобы больше читать: https://reactjs.org/docs/hooks-effect.html

0 голосов
/ 22 сентября 2019

Способ получения значения состояния - использовать useEffect и использовать состояние в качестве зависимости.Это означает, что когда мы изменяем значение, цикл рендеринга завершается и начинается новый, тогда useEffect сработает: 

useEffect( () => { console.log(value); }, [value] );

Если вам нужно будет прочитать значение в том же цикле, что и оноизменена возможность использования функции useState set.Это показывает последнее значение непосредственно перед обновлением: 

setValue( latest_value => {
    const new_value = latest_value + 1;

    console.log(new_value);

    return new_value;
} );
...