TypeError：无法读取REACTJS中未定义的属性“值”

问题描述

我在handleChange上收到此错误。我想知道是什么问题？

 const [testState,setTestState] = useState({
    activeStep:0,firstName: '',lastName: '',email: '',occupation: '',city: '',bio: ''
  });

const { activeStep } = testState;
  const { firstName,lastName,email,occupation,city,bio } = testState;
  const values = { firstName,bio }

 const handleChange = (e) => {
      const value = e.target.value;
      setTestState({
        ...testState,[e.target.name]: value
      });
      
     
    };

  const handleNext = () => {
    debugger
    const { activeStep } = testState;
    setTestState({activeStep:activeStep+1});
  };

  const handleBack = () => {

    debugger
    const { activeStep } = testState;
    setTestState({activeStep:activeStep-1});
  };

我在材料ui步进器中使用它，就像这样。当我单击“下一步”或“后退”按钮时，我希望文本字段数据在那里。希望您熟悉Material Ui Stepper，这将是真正的帮助。

function getStepContent(step) {
    switch (step) {
      case 0:
        return (
          <TransportationDetail 
          handleNext={handleNext}
            propsTransportation={propsParent.propsRateDetailsData}
            exhandleChange={(e) => exhandleChange(e)}
            values={values}
          />
        );
      case 1:
        return (
          <Testing 1
          handleNext={handleNext}
          handleBack={handleBack}
          exhandleChange={(e) => exhandleChange(e)}
          values={values}
          />
        );

      case 2:
       return (
          <Testing 2
          handleNext={handleNext}
          handleBack={handleBack}
          exhandleChange={(e) => exhandleChange(e)}
          values={values}
          />
        );
        
    
      default:
        return "No data available";
    }
  }

现在作为道具传递给这样的组件：

 const { values,exhandleChange } = props;

并转到文本字段

     <TextField

        fullWidthid="outlined-size-normal"
        variant="outlined"
        name="firstName"
        onChange={exhandleChange()}
        value={values.firstName}
      />


     <TextField

        fullWidthid="outlined-size-normal"
        variant="outlined"
        name="lastName"
        onChange={exhandleChange()}
        value={values.lastName}
      />

解决方法

在testState可能会损坏的3个易受攻击的地方。

1. 在handleChange
中
2. 在handleNext中，或
3. 在handleBack
中

看看代码片段，我相信您只是想通过在handleNext和handleBack中将值递增或递减1来更新activeStep中testState的值。对于handleChange，您想转到选定的索引。

在这里，我们需要欣赏传播算子coz的美，这只能解决我们的问题。对于handleNext和handleBack，您可以遵循以下代码段，

const handleBack = () => {
      const { activeStep } = testState;

      const tempState = {...testState}
      tempState.activeStep = activeStep - 1
      setTestState(tempState);
    };


const handleNext = () => {
      const { activeStep } = testState;

      const tempState = {...testState}
      tempState.activeStep = activeStep + 1
      setTestState(tempState);
    };


const handleChange = (e) => {
      const tempState = {...testState}
      tempState.activeStep = e
      setTestState(tempState);
    };

并在调用函数时将组件的selectedIndex传递给handleChange。