时间戳

首页 > 解决方案 > Warning: This synthetic event is reused for performance reasons React

javascript - Warning: This synthetic event is reused for performance reasons React

问题描述

Can somebody explain to me why I got these warning in console, when I try to drag and how to solve it?

// Main Component

  handleDragStart = data => event => {
    console.log("dataaa", data, "event ", event);
  };

  makeBoxes = () => {
    return this.state.boxes.map(box => (
      <Box
        key={box.id}
        box={box}
        draggable={true}
        onDragStart={this.handleDragStart}
      />
    ));
  };

  render() {
    return <div className="box-group">{this.makeBoxes()}</div>;
  }

// Box Component

export default class Box extends React.Component {
  render() {
    const { id, color, text } = this.props.box;
    return (
      <div
        className="boxElement"
        id={id}
        style={{ backgroundColor: color }}
        draggable={this.props.draggable}
        onDragStart={this.props.onDragStart({ id: id })}
      >
        <div>{text}</div>
      </div>
    );
  }
}

I got this warning: Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property clientX on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

https://codesandbox.io/s/nostalgic-pike-o51yj

标签： javascriptreactjsconsolewarnings

解决方案

在您的 BoxesGroup 中，我将handleDrag函数编辑为如下所示来解决它：

  handleDragStart = data => event => {
    event.persist();
    event.dataTransfer.setData("text", event.target.id);
    console.log("data", data, "event ", event);
  };

这是来自 React文档：

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

默认情况下，react 有一个事件池，它会继续使用它们。（类似于线程池）。为了避免在使用后将事件放回池中做出反应，您可以调用event.persist().

推荐阅读