警告:出于性能原因，该合成事件被重用，发生在< input type ="checkbox". /> [英] Warning: This synthetic event is reused for performance reasons happening with <input type="checkbox" />

问题描述

我一直在为一个类编写一个简单的react-redux todo示例，每次我选中和取消选中复选框输入时，我都会在控制台中看到几条警告消息.

I've been working on a simple react-redux todo example for a class and I came across several warning messages that show in the console everytime I check and uncheck a checkbox input.

您可以在以下图像中看到警告.

You can see the warnings in the following images.

我也在Google上搜索了警告消息，但找不到任何有效的解决方案.另外，令我注意的是，它似乎试图访问本机事件的每个属性以及DOM元素.

I also did a google search for the warning message but couldn't find any solution that works. Also, what stroke my attention was that it looks like it was trying to access every property of the native event, and DOM element.

这是具有输入复选框的表示性组件的代码

This is the code for the presentational component that has the input checkbox

class TodoItem extends React.Component {
  state = {
    isChecked: false
  };
  handleCheckbox = () => {
    this.setState({
      isChecked: !this.state.isChecked
    });
  };
  render() {
    const { todos, onItemClick } = this.props;
    const { isChecked } = this.state;
    return (
      <div>
        <ul>
          {todos.map((todo, id) => {
            return (
              <li key={id} onClick={onItemClick}>
                <input
                  onChange={this.handleCheckbox}
                  type="checkbox"
                  checked={isChecked}
                />
                <label>
                  <span />
                  {todo.textInput}
                </label>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default TodoItem;

我也在CodeSandbox上上传了该示例: https://codesandbox.io/s/k0mlxk1yqv

I uploaded the example on CodeSandbox as well: https://codesandbox.io/s/k0mlxk1yqv

如果您想复制此错误，则需要将一项添加到待办事项列表中，然后单击复选框以选中和取消选中几次.

If you want to replicate this error you need to add an Item to the todo List and click the checkbox to check and uncheck a couple of times.

如果有人知道为什么这个警告标志会继续出现以及如何禁用它们，我将非常感谢您的输入:)

If anyone has any idea why this warning signs keep appearing and how to disable them I would appreciate your input very much :)

推荐答案

之所以发生这种情况，是因为在异步上下文中使用了隐式传递给onItemClick的event. 正如Andre Lemay所说，您应该将需求分配给局部变量并引用它们.

This happened because the event implicitly passed to onItemClick is used in an asynchronous context.
As Andre Lemay said, you should assign your needs to local variables and reference them.

就我而言，我有以下代码:

In my case, I had this code:

handleInput = e => { // <-- e = synthetic event
  this.setState(state => ({ // <-- asynchronous call
    data: {
      ...state.data,
      [e.target.name]: e.target.value // <-- this was causing the warnings (e.target is in an asynchronous context)
    }
  }));
};

然后我将其更改为:

handleInput = e => {
  const { name, value } = e.target; // <-- moved outside asynchronous context

  this.setState(state => ({
    data: {
      ...state.data,
      [name]: value
    }
  }));
};

这篇关于警告:出于性能原因，该合成事件被重用，发生在< input type ="checkbox". />的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！