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

时间:2020-08-08 03:58:22

标签: reactjs react-hooks react-props

具有一个React组件,该组件使用props中的钩子来设置状态。
道具被存储。 prop值用于在钩子中设置setState。

但是即使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)

enter image description here

这是针对材料ui步进器的 https://material-ui.com/components/steppers/

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

在其中定义了storageStep的地方。

在直接父组件中定义。

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

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

并在此父对象的useEffect中传递setProjDetail函数

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

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

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

storedState是projDetail的属性,该属性传递给子对象

storedStep={projDetail.requeststatus}

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

1 个答案:

答案 0 :(得分:0)

在我的情况下,仅在检查属性“ requeststatus”的存在之后才将子组件呈现给父对象来解决此问题

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

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

}