Question

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

2020-09-23

1046

javascript reactjs react-native material-ui

我在 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});
  };

我正在 Material UI Stepper 中使用它，就像这样。我希望当我单击下一步或后退按钮时，文本字段数据会出现在那里。我希望您熟悉 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";
    }
  }

现在作为 props 传递给 <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}
      />

Answer 1

有 3 个易受攻击的地方， testState 可能会被破坏。

在 handleChange
在 handleNext 中，或
在 handleBack

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

在这里，我们需要欣赏扩展运算符的美妙之处，因为它只会解决我们的问题。对于 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 。