у меня есть ошибка создания перетаскиваемого компонента в реакции

Question

Привет, я пытаюсь создать перетаскиваемый компонент, используя настраиваемый хук в реакции, но у меня возникла эта проблема "Ошибка типа: Не удается прочитать свойство 'style' of null"

вот код для пользовательского хука

import { useState } from "react";
const useDragable = dragItem => {
  const [active, setActive] = useState(false);
  const [currentX, setCurrentX] = useState(0);
  const [currentY, setCurrentY] = useState(0);
  const [initialX, setInitialX] = useState(0);
  const [initialY, setInitialY] = useState(0);
  const [xOffset, setXoffset] = useState(0);
  const [yOffset, setYoffset] = useState(0);

  const dragStart = e => {
    console.log("dragItem");
    console.log(dragItem);
    e.target.classList.add("dragging");
    setInitialX(e.clientX - xOffset);
    setInitialY(e.clientY - yOffset);
    setActive(true);
  };
  const dragEnd = e => {
    e.target.classList.remove("dragging");
    setInitialX(currentX);
    setInitialY(currentY);
    setActive(false);
  };

  const drag = e => {
    if (active) {
      e.preventDefault();
      setCurrentX(e.clientX - initialX);
      setCurrentY(e.clientY - initialY);
      setXoffset(currentX);
      setYoffset(currentY);
    }

    setTranslate(currentX, currentY, dragItem.current);
  };
  function setTranslate(xPos, yPos, el) {
    if (el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  }
  return [dragStart, dragEnd, drag];
};

export default useDragable;

Вот для компонента

import React from "react";
import useDragable from "../../Custom/useDragable";
import { useRef } from "react";
const DragableFather = () => {
  const dragIm = useRef(null);
  const hookValue = useDragable(dragIm.current);
  const [dragStart, dragEnd, drag] = hookValue;

  return (
    <div
      className="container"
      style={{ backgroundColor: "lightblue", height: "100vh", width: "100vw" }}
      onDragOver={drag}
    >
      <div
        draggable="true"
        className="square"
        ref={dragIm}
        onClick={() => console.log(dragIm.current)}
        onDragStart={dragStart}
        onDragEnd={dragEnd}
      ></div>
    </div>
  );
};
export default DragableFather;

Действительно, похоже, что созданная ссылка неверна в правильном направлении. и когда я передаю в качестве аргумента внутри компонента.

React выдает ошибку бесконечного рендера

Answer 1

Я нахожу проблему!

Когда вы используете useRef, вам не нужно ставить "this" раньше.

Вот почему это дает ошибку, во второй раз, когда я пытался измениться, я положил это в "ref = {dragIm}"

Answer 2

Не уверен на 100%, но

1. в setTranslate добавить условие

if (el) {
// your code
}

Это предотвратит ошибку, но я не думаю, это решит это

Попробуйте перейти к useDraggable * только 1013 * dragIm no dragIm.current и в вашем useDraggable передать setTranslate в качестве третьего аргумента dragItem.current вместо dragItem