Предупреждение: это синтетическое c событие повторно используется по соображениям производительности. - PullRequest
Новая
       53

Предупреждение: это синтетическое c событие повторно используется по соображениям производительности.

0 голосов
/ 15 марта 2020

Может кто-нибудь объяснить мне, почему я получил это предупреждение в консоли, когда я пытаюсь перетащить и как его решить?

// Главный компонент 

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

Я получил это предупреждение: Предупреждение: это событие syntheti c повторно используется по соображениям производительности. Если вы видите это, вы получаете доступ к свойству clientX в освобожденном / аннулированном событии syntheti c. Это установлено в ноль. Если вам необходимо сохранить исходное событие syntheti c, используйте event.persist ().

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

1 Ответ

0 голосов
/ 15 марта 2020

В вашей BoxesGroup я отредактировал функцию handleDrag, чтобы решить эту проблему: 

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

Это из React docs :

Если вы хотите получить доступ к свойствам события асинхронным способом, вы должны вызвать event.persist () для события, которое удалит событие syntheti c из пула и позволит сохранить ссылки на событие. по коду пользователя.

По умолчанию в программе response есть пул событий, и он продолжает их использовать. (похоже на пул потоков). Чтобы избежать реакции на возврат события в пул после его использования, вы можете позвонить event.persist().

...