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

Posted 2023-02-22

【中文标题】React.JS TypeError：无法读取未定义的属性“编号”-（在 setState 内）

【英文标题】：React.JS TypeError: Cannot read property 'number' of undefined - (inside 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 在输入字段中。

【参考方案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);
  ;