立即状态更新后尝试获取状态值

Question

我已经用usestate 声明了一个变量，如下所示

const [currentStepNumber, setCurrentStepNumber] = useState(0);

然后当我点击移动功能时，我正在更新状态，如下所示

const handleMove = () => {
   setCurrentStepNumber(currentStepNumber + 1);
   const { label } = Object.values(PROJECT_PHASE).find(s => s.stepNumber === currentStepNumber);
   const projectPhaseID = projectPhaseData.projectPhases.find(a => a.name === label).id;
   console.log(currentStepNumber);
   // need to do API call as well in move function 
};

而且currentStepNumber 仍然显示0 而不是仅1，我不能使用计时器来触发和更新值。有没有其他方法可以实现这一点？

我只需要在移动功能中更新currentStepNumber。

Answer 1

或许可以试试useEffect:

useEffect(() => {
   const postStepData = async () => {
     try {
         // call the api
         const response = await postDataPromise({...data, currentStepNumber});
         setCurrentStepNumber(0);
         setSomeOtherState(false);
     } catch (e) {
         console.log(e)
     }
   }

   const { label } = Object.values(PROJECT_PHASE).find(s => s.stepNumber === currentStepNumber);
   const projectPhaseID = projectPhaseData.projectPhases.find(a => a.name === label).id;
   console.log(currentStepNumber);
   /*
    * as an example only call api on step 4
   */
   if (currentStepNumber === 4) {
      void postStepData();
   }
}, [currentStepNumber])

const handleMove = () => setCurrentStepNumber(currentStepNumber + 1);

参考：

• https://reactjs.org/docs/hooks-effect.html

Answer 2

您应该在React's useEffect 中使用新的currentStepNumber：

const MyComponent = () => {
  const [currentStepNumber, setCurrentStepNumber] = useState(0);
  
  const handleMove = () => {
    setCurrentStepNumber(currentStepNumber + 1);
  };

  useEffect(() => {
    const { label } = Object.values(PROJECT_PHASE).find(s => s.stepNumber === currentStepNumber);
    const projectPhaseID = projectPhaseData.projectPhases.find(a => a.name === label).id;
    console.log(currentStepNumber);
  }, [currentStepNumber])

  return (
    <>{/* some jsx */}</>
  )
}