Question

此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>
}

是否有更好的读取值的方法，因为我不想为每个渲染都进行控制台。

Answer 1

您可以为此使用useEffect

useEffect(() => {
   console.log(count);
}, [count]) //[count] is a dependency array, useEffect will run only when count changes.

Answer 2

我建议不要使用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

Answer 3

获取状态值的方法是使用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;
} );

在使用useState钩子时在设置后读取组件状态

3 个答案: