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

Question

Have a React Component that sets a state using hooks from props.
prop is storedStep. prop value is used to setState in a hook.

But state is set to undefined, even if console.log says prop has a number value

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)

This is for a material ui stepper https://material-ui.com/components/steppers/

I am setting the active step of a Stepper https://codesandbox.io/s/qhhv1?file=/demo.js The example in the demo for the stepper does not use a prop to set the active Step, but sets it to 0.

Where storedStep is defined.

It's defined in the direct parent component.

I use another hook in direct parent

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

and pass the setProjDetail function in the useEffect of this parent

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

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

getDetailFunc will fetch the detail and set the projDetail using setProjDetail

storedState is a property of projDetail which is passed to the child

storedStep={projDetail.requeststatus}

storedStep is correctly getting the value 0 at some point(line 41). But not able to set it to the activeStep(line 45)

Answer 1

I fixed this in my case by rendering the child component in parent only after checking for existence of the attribute "requeststatus"

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

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

}