类型错误:evt.target 在功能 setState 中为 null [英] TypeError: evt.target is null in functional setState

问题描述

这两个函数的主要区别是什么?

handleOnChange(evt) {this.setState(() => ({代码名称:evt.target.value}));}handleOnChange(evt) {this.setState({tickerName: evt.target.value });}

为什么使用直接改变状态的 handleOnChange() 函数可以正常工作?

<输入类型=文本"值={this.state.tickerName}onChange={(evt) =>this.handleOnChange(evt)}/>

当我使用第一个通过回调改变状态的函数时，我收到此错误:

TypeError: evt.target is null

解决方案

这是 setState 的两种不同语法

第一:

handleOnChange(evt) {this.setState(() => ({代码名称:evt.target.value}));}

使用更新函数作为第一个参数.

第二:

handleOnChange(evt) {this.setState({tickerName: evt.target.value });}

使用要更新的对象

在更新函数中使用合成事件时需要使用event.persist()

来自文档::><块引用>

SyntheticEvent 被合并.这意味着 SyntheticEvent 对象将被重用，所有属性将在事件发生后无效回调已被调用.这是出于性能原因.像这样，您无法以异步方式访问该事件.

如果你想以异步方式访问事件属性，你应该在事件上调用 event.persist()，这将删除池中的合成事件并允许对事件的引用由用户代码保留.

你的拳套看起来像

handleOnChange(evt) {evt.persist();this.setState(() => ({代码名称:evt.target.value}));}

或者不使用 event.persist() 您可以将事件存储在另一个对象中

handleOnChange(evt) {常量值 = evt.target.value;this.setState(() => ({代码名称:evt.target.value}));}

PS 仅当您希望基于 prevState 或 props

CodeSandbox

What's the major difference bewteen these two functions?

handleOnChange(evt) {
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

handleOnChange(evt) {
    this.setState({ tickerName: evt.target.value });
}

And why with the handleOnChange() function that change the state directly this works fine?

<input
    type="text"
    value={this.state.tickerName}
    onChange={(evt) => this.handleOnChange(evt)} 
/>

When I use the first function that change the state with a callback I get this error:

TypeError: evt.target is null

解决方案

These are two different syntaxes for setState

First:

handleOnChange(evt) {
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

uses the updater function as the first argument.

Second:

handleOnChange(evt) {
   this.setState({ tickerName: evt.target.value });
}

uses the object to be updated

When using the synthetic event in the updater function you need to use event.persist()

From the documentation:

the SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

Your fist case would look like

handleOnChange(evt) {
    evt.persist();
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

Or instead of using event.persist() you could store the event in another object

handleOnChange(evt) {
    const value = evt.target.value;
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

P.S. You should use the updater function for setState only when you wish to update the current state based on prevState or props

CodeSandbox

这篇关于类型错误:evt.target 在功能 setState 中为 null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！