Question

每当我在input字段中键入内容时，都会出现以下错误：-

无法读取null的属性“值”

当尝试输入任何内容时，我遇到一种形式，其中有一个input字段搜索值。

Here是我的代码。

此功能的问题

handleInputFieldChange = (event, name) => {
    this.setState(preState => ({
      ...preState,
      form: {
        ...preState.form,
        [name]: event.target.value
      }
    }));
  };

Answer 1

React lib本身有一个警告，基本上可以指导您解决此问题。

警告：出于性能原因，此合成事件被重用。如果您看到的是，您正在访问以下位置的属性target 已发布/无效的合成事件。 设置为空。如果你必须要保留原始的综合事件，请使用event.persist()

因此，解决方法是在如下所示的局部变量中获取目标对象的引用。

handleInputFieldChange = (event, name) => {
    const { target } = event;
    this.setState(preState => ({
      ...preState,
      form: {
        ...preState.form,
        [name]: target.value
      }
    }));
  };

仅当您将{strong> updater 函数与setState方法一起使用时，才会发生这种情况。他们要求使用event.persist()，但是在我的应用程序中，只需引用target对象的引用即可在 update函数中使用它，该函数可以100％工作。

签出Event Pooling的文档

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

如果要以异步方式访问事件属性，则可以   应该在事件上调用event.persist（），这将删除   池中的合成事件，并允许对该事件的引用为   由用户代码保留。

无法读取空输入字段的属性“值”？

1 个答案: