警告：出于性能原因，此合成事件被重用 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文档：

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

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