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

普里扬克·辛格（Priyank Deep Singh）

我在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, lastName, email, occupation, city, 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";
    }
  }

现在作为道具传递给<Testing 1 />组件，如下所示：

 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}
      />

Piyush Priyadarshi

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

在 handleChange
在handleNext或
在 handleBack

看一下代码片段，我相信您只想通过在handleNext和handleBack中将值递增或递减1来更新activeStepintestState的值。对于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);
    };

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。