reactjs - 在 react 中使用 useState 钩子(Hook)时设置后立即读取组件状态

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.