React.JS TypeError：无法读取未定义的属性“编号”-（在 setState 内）答案

【问题标题】：React.JS TypeError: Cannot read property 'number' of undefined - (inside setState)React.JS TypeError：无法读取未定义的属性“编号”-（在 setState 内）
【发布时间】：2021-09-06 22:33:50
【问题描述】：

大家好，
在我的 ReactJS 网站中，我收到此错误 - `TypeError: Cannot read property 'number' of undefined`
`HTMLInputElement.anonymous` 为什么？

我做了console.log(this.state.number) 并且数字中有一个值。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mobileNum: '',
      number: '',
    };
  }  

  somefunction=()=>{ // Is called with onKeyDown - I checked it does.
    this.setState({ number: document.getElementById('mySubmit').value });

  
  enterPressed = () => {
    const submit = document.getElementById('mySubmit');
    submit.addEventListener('keyup', function (event) {
      if (event.key === 'Enter') {
        this.setState({ mobileNum: this.state.number }); // Here is the error line !
      }
    });
  };

如果我在另一个函数中使用 setState 和 if 条件，它会出错 - setState is not a function
this.setState({ mobileNum: this.state.number }) 也在我创建的另一个函数中工作，但在 enterPressed() 中没有。

感谢帮助者:)

【问题讨论】：

你在哪里使用 enterPressed ？
@Viet 在输入字段中。

标签： reactjs react-native if-statement state setstate

【解决方案1】：

应该是粗箭头函数

enterPressed = () => {
    const submit = document.getElementById('mySubmit');
    submit.addEventListener('keyup', (event) => {
        if (event.key === 'Enter') {
            this.setState({
                mobileNum: this.state.number
            });
        }
    });
};

【讨论】：

非常感谢 Murat 它刚刚工作，解决了这个问题。你现在能解释一下它是如何工作的吗？为什么我之前的自调用函数不起作用？

【解决方案2】：

您永远不会调用someFunction()，它应该为this.state.number 分配一个数字值。当您尝试将this.state.number 分配给mobileNum 时，该值仍然是undefined。

【讨论】：

嗨@Casper someFunction() 每次在输入字段内按下一个键时都会被调用。
@ExtraSun 你有没有想过为什么胖箭头函数解决了你的问题？

【解决方案3】：

您可以添加双向绑定，而不是在此函数中使用 HTML 选择器：

 enterPressed = (e) => {
    e.preventDefault();
    let password = e.target.value();
    this.setState({ ...this.state, mobileNum: password});
  };

【讨论】：