为什么 `dataTransfer` 方法为我的对象返回 null？

Question

I'm building a drag and drop application using React and I'm following this tutorial: https://jsfiddle.net/xv5mu40h/8/ .

However, when I try it on my end, I get this error message: TypeError: Cannot read property 'cloneNode' of null , talking specifically about this line of code: const nodeCopy = document.getElementById(data).cloneNode(true); .

I've console logged what data is before this line of code and it appears that data is null when I try to drag and drop any of the objects (which I call rewards in this case). Any help is appreciated!

NOTE: I've taken out as much of the irrelevant code as possible; for more focus points, I believe that the problem lies in the dragging/dropping function (not in any of the lifecycle methods or the unique identifier method).

class Home extends Component {
  // Constructor for home
  constructor(props) {
    super(props);
    this.state = {
      rewards: [],
      cat1Counter: 1,
      cat2Counter: 1,
      cat3Counter: 1,
      cat4Counter: 1,
      cat5Counter: 1
    };
  }

  // Fetch rewards once component mounts
  componentDidMount() {
    this.props.fetchRewards();
  }

  // Update local state once all rewards are fetched
  componentDidUpdate(prevProps) {
    if (this.props.rewards !== prevProps.rewards) this.setState({rewards: this.props.rewards});
  }

  // Creates a unique ID for a reward copy
  getUniqueId(prefix) {
    let id = '';
    if (prefix === 'reward-1') {
      id = `${prefix} copy-${this.state.cat1Counter++}`
    } else if (prefix === 'reward-2') {
      id = `${prefix} copy-${this.state.cat2Counter++}`
    } else if (prefix === 'reward-3') {
      id = `${prefix} copy-${this.state.cat3Counter++}`
    } else if (prefix === 'reward-4') {
      id = `${prefix} copy-${this.state.cat4Counter++}`
    } else if (prefix === 'reward-5') {
      id = `${prefix} copy-${this.state.cat5Counter++}`
    }

    return id;
  }

  // Allow for elements to be dropped in other elements
  allowDrop(e) {
    e.preventDefault();
  }

  // Removes a node
  removeNode(node) {
    node.parentNode.removeChild(node);
  }

  // Drags a reward
  drag(e) {
    e.dataTransfer.setData('text', e.target.id);
  }

  // Drops the reward
  drop(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData('text');
    const isLeft = 'reward-1' === data || 'reward-2' === data;

    const nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = `${this.getUniqueId(data)}`;

    if (isLeft) {
      e.target.appendChild(nodeCopy);
    } else {
      if (e.target.id !== 'P') {
        this.removeNode(document.getElementById(data));
        e.target.appendChild(nodeCopy);
      }
    }

    e.stopPropagation();
    return false;
  }

  render () {
    return (
      <div className="home-container">
        <div className="rewards-container">
          <h2>Rewards</h2>

          <ul>
            {this.state.rewards.map(reward => <li key={reward._id} draggable onDragStart={e => this.drag(e)}>{reward.name}</li>)}
          </ul>
        </div>

        <div className="categories-container">
          <h2>Categories</h2>

          <div className="list-wrapper">
            <ul id="category-1" onDrop={e => this.drop(e)} onDragOver={e => this.allowDrop(e)}><p>C1</p></ul>
            <ul id="category-2" onDrop={e => this.drop(e)} onDragOver={e => this.allowDrop(e)}><p>C2</p></ul>
            <ul id="category-3" onDrop={e => this.drop(e)} onDragOver={e => this.allowDrop(e)}><p>C3</p></ul>
            <ul id="category-4" onDrop={e => this.drop(e)} onDragOver={e => this.allowDrop(e)}><p>C4</p></ul>
            <ul id="category-5" onDrop={e => this.drop(e)} onDragOver={e => this.allowDrop(e)}><p>C5</p></ul>
          </div>
        </div>
      </div>
    );
  }
};

UPDATE

Per the answer below, I've changed onDrag to onDragStart and now it works when I drag objects from the rewards list into the categories; however, the bug still pops up when I try dragging cloned objects in between categories.

Answer 1

You have to set the data onDragStart. The onDrag would be called every time you drag and might be not the right place to set. You could change onDrag to onDragStart