繁体   English   中英

在 useState 钩子中使用 prop 值会给出未定义的值

[英]using prop value in useState hook gives undefined value

有一个 React 组件,它使用 props 中的钩子设置 state。
道具存储步骤。 prop 值用于在挂钩中设置状态。

但是 state 设置为 undefined,即使 console.log 说 prop 有一个数值

line 41     console.log(storedStep)
      const [activeStep, setActiveStep] = React.useState(1);
      const [activeStep2, setActiveStep2] = React.useState(storedStep);
line 44      console.log(activeStep)
line 45       console.log(activeStep2)

在此处输入图像描述

这是用于材料ui步进器https://material-ui.com/components/steppers/

我正在设置 Stepper https://codesandbox.io/s/qhhv1?file=/demo.js步进器的活动步骤 步进器演示中的示例不使用道具来设置活动步骤,而是将其设置为0。

定义了 storedStep 的位置。

它在直接父组件中定义。

我在直接父母中使用另一个钩子

const [projDetail, setProjDetail] = useState({});

并在此父级的 useEffect 中传递 setProjDetail function

 useEffect(() => {
    async function fetchData() {
      await getDetailFunc (email, projectid, setProjDetail);
    }

    fetchData();
  }, [email, projectid,getDetailFunc]);

getDetailFunc 将获取详细信息并使用 setProjDetail 设置 projDetail

storedState 是传递给子进程的 projDetail 的属性

storedStep={projDetail.requeststatus}

storedStep 在某个点(第 41 行)正确获取值 0。 但无法将其设置为 activeStep(第 45 行)

在我的情况下,我通过仅在检查属性“requeststatus”是否存在后才在父组件中渲染子组件来解决此问题

if (projDetail.hasOwnProperty("requeststatus")) {

.....
...
    <Stepper
      steps={steps}
      storedStep={projDetail.requeststatus}
      saveStageFunc={saveStageinDynamo}
      updateKey={{ email, projectid }}
      labelArray={processStates}
    />

}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM