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

【问题标题】：TypeError: Cannot read property 'value' of undefined in REACTJSTypeError：无法读取 REACTJS 中未定义的属性“值”
【发布时间】：2021-01-09 07:26:55
【问题描述】：

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

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

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

【问题讨论】：

如果您添加一些与调用 handleChange 的位置相关的代码，也许有人可以帮助您
看起来e.target 是未定义的。您是否传递了id 而不是事件本身？ e.target 仅在 e 是原始 ChangeEvent 时才存在。
e.target 有 value 属性吗？ ..
如果将console.log(e.target) 放在handleChange 正文中会打印什么？
我认为 Jarek 的答案就是解决方案。如果您将onChange={exhandleChange()} 更改为onChange={exhandleChange}，您将在handleChange 上获得该事件

标签： javascript reactjs react-native material-ui

【解决方案1】：

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

在handleChange
在handleNext，或
在handleBack

看代码sn-p，相信你只是想更新testState中activeStep的值，通过handleNext和handleBack中的值加1或减1。而对于handleChange，您要转到选定的索引。

在这里，我们需要欣赏传播运算符的美妙之处，因为它只会解决我们的问题。对于handleNext 和handleBack 你可以按照这个代码sn-p，

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。

【讨论】：