警告:由于性能原因，此合成事件被重用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。这被设置为null。如果必须保留原始合成事件，请使用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()。