Reactjs 处理状态更改 - 无法读取未定义的属性答案

【问题标题】：Reactjs Handle State Change - Cannot read property of undefinedReactjs 处理状态更改 - 无法读取未定义的属性
【发布时间】：2021-08-06 07:37:33
【问题描述】：

我正在根据文本框传递给事件处理程序的 onchange 事件更新初始状态，如下所示 -

import React,{useState} from 'react'

function ViewAll() {
    const iCandidateState={
        Name:'',
        Age:'',
        Qalification:''
    };
    function nameHandler(event){
        alert(event.target.value);
        this.iCandidateState.Name=event.target.value;
    }
    return (
        <div>
            <table>
              <tr>
                  <td>
                      Name
                  </td>
                  <td>
                      <input type="text" name="txtName" value={iCandidateState.Name} onChange={(e)=>nameHandler(e)}></input> 
                  </td>
              </tr>
              <tr>
                  <td>
                      Age
                  </td>
                  <td>
                      <input type="text" name="txtAge"></input> 
                  </td>
              </tr>
              <tr>
                  <td>
                      Qalification
                  </td>
                  <td>
                      <input type="text" name="txtQualification"></input> 
                  </td>
              </tr>
              <tr>
                  <td colSpan="2" align="center">
                     <button name="btnSubmitForm">Post</button>
                  </td>
              </tr>
            </table>
        </div>
    )
}

export default ViewAll

当我在 txtName 中输入内容时，我希望 state - iCandidateState 能够使用文本框中的 Name 字段进行更新。但我收到一个错误 - TypeError: Cannot read property 'iCandidateState' of undefined

我也试过用 setState as -

 this.setState({
                ...iCandidateState,
                Name:event.target.value
            })

在文本框中输入内容后，我收到错误 -

TypeError: Cannot read property 'setState' of undefined

如何更新状态？

【问题讨论】：

标签： javascript reactjs react-redux state

【解决方案1】：

您混淆了类组件和功能组件的概念。 this 语法适用于类组件，即

class ViewAll extends Component {

  render() {
    return (/* some components */);
  }
}

您正在尝试创建一个功能组件（由关键字function 表示）。所以你应该改用hooks。应该是这样的

import { useState } from 'react'

function ViewAll() {
  const [iCandidateState, setICandidateState] = useState({
    Name: '',
    Age: '',
    Qalification: ''
  });

  function nameHandler(event) {
    alert(event.target.value);
    setCandState({ ...iCandidateState, Name: event.target.value })
  }

  return (/* some components */);
}

export default ViewAll

【讨论】：

马修，不应该将“this”与功能组件一起使用，而应该使用钩子。这很有帮助。
这行代码可能会导致错误setICandidateState(event.target.value); 请注意setState - 合并和useState - 替换之间的区别。所以应该是setCandState({ ...iCandidateState, Name: event.target.value })

【解决方案2】：

在函数组件中，不能使用 this。相反，您可以使用 useState 挂钩来处理此问题。请用这个替换你的代码的相应部分

const [iCandidateState, setCandState] = useState({
    Name: '',
    Age: '',
    Qalification: ''
});

function nameHandler(event) {
    alert(event.target.value);
    setCandState({
        ...iCandidateState,
        Name: event.target.value,
    })
}

【讨论】：