useState 中的 setValue 函数不起作用

Question

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

export function App() {
  const [val,setVal] = useState(1) ;

  useEffect(()=>{
    console.log("before changing",val) ;
    setVal(val+1) ;
    console.log("after changing",val) ;
  },[]) ;

  return (
    <div className='App'>
    </div>
  );
}[tag:tag-name]

我正在尝试使用 useEffect 中的 setVal 函数更新“val”的值，但它似乎不起作用

Answer 1

状态的更改是计划好的，因此直到下一次渲染时您才会看到它。 如果您在 DOM 中的某个位置显示该值，您会发现它有效。

export function App() {
  const [val,setVal] = useState(1) ;

  useEffect(()=>{
    console.log("before changing",val) ;
    setVal(val+1) ;
    console.log("after changing",val) ;
  },[]) ;

  return (
    <div className='App'>
        {val}
    </div>
  );
}