警告:此合成事件因性能原因而被重用，并与 <input type=“checkbox";/> [英] Warning: This synthetic event is reused for performance reasons happening with <input type="checkbox" />

问题描述

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

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

我还对警告消息进行了谷歌搜索，但找不到任何有效的解决方案.另外，让我印象深刻的是，它看起来像是在尝试访问本机事件和 DOM 元素的每个属性.

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

类 TodoItem 扩展 React.Component {状态 = {已检查:假};处理复选框 = () =>{这个.setState({isChecked: !this.state.isChecked});};使成为() {const { todos, onItemClick } = this.props;常量 { isChecked } = this.state;返回 (
<ul>{todos.map((todo, id) => {返回 (<li key={id} onClick={onItemClick}><输入onChange={this.handleCheckbox}类型=复选框"已检查={isChecked}/><标签><跨度/>{todo.textInput}</标签></li>);})}</ul></div>);}}导出默认 TodoItem；

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

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

如果有人知道为什么此警告标志不断出现以及如何禁用它们，我将非常感谢您的意见:)

解决方案

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

就我而言，我有这个代码:

handleInput = e =>{//<-- e = 合成事件this.setState(state => ({//<-- 异步调用数据: {...状态.数据，[e.target.name]: e.target.value//<-- 这是导致警告的原因(e.target 在异步上下文中)}}));};

然后我改成:

handleInput = e =>{常量 { 名称，值 } = e.target;//<-- 移到异步上下文之外this.setState(状态 => ({数据: {...状态.数据，[名称]:值}}));};

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.

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;

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 :)

解决方案

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)
    }
  }));
};

Then I changed it to:

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

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

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