警告：出于性能原因，此合成事件被重用 React

Question

有人可以向我解释为什么我在控制台中收到这些警告，当我尝试拖动时以及如何解决它？

// 主要组件

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

// 盒子组件

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

我收到了这个警告： 警告：出于性能原因，此合成事件被重用。如果您看到此内容，则表示您正在访问已发布/无效合成事件上的属性 clientX。这设置为空。如果您必须保留原始合成事件，请使用 event.persist()。

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

Answer 1

在您的 BoxesGroup 中，我编辑了 handleDrag 函数，使其看起来像这样来解决它：

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

这是来自 React docs:

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

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