在使用 react-dnd 的 react typescript 中使用 useDrag({}) 方法时出错答案

【问题标题】：Getting error while using useDrag({}) method in react typescript with react-dnd在使用 react-dnd 的 react typescript 中使用 useDrag({}) 方法时出错
【发布时间】：2021-07-26 22:29:12
【问题描述】：

import { useEffect } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { useAppState } from '../AppStateContext';
import { DragItem } from '../DragItem';
export const useItemDrag = (item: DragItem) => {
  const { dispatch } = useAppState();
  const [, drag, preview] = useDrag({
    item,
    begin: () => dispatch({ type: 'SET_DRAGGED_ITEM', payload: item }),
    end: () => dispatch({ type: 'SET_DRAGGED_ITEM', payload: undefined }),
        
  });
  useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);
  return { drag };
};

react-dnd issue images here with error message

在 useDrag 上遇到此错误

Argument of type '{ item: DragItem; begin: () => any; end: () => any; }' is not assignable to parameter of type 'FactoryOrInstance<DragSourceHookSpec<unknown, unknown, any>>'.

对象字面量只能指定已知属性，'FactoryOrInstance>'类型中不存在'begin'

【问题讨论】：

标签： reactjs react-typescript react-dnd

【解决方案1】：

begin spec 在 react-dnd v14 中被贬值，使用 item 而不是 useDrag 中需要 type spec。 Link here

import { useEffect } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { useAppState } from '../AppStateContext';
import { DragItem } from '../DragItem';
export const useItemDrag = (item: DragItem) => {
  const { dispatch } = useAppState();
  const [, drag, preview] = useDrag({
    type: item.type,
    item: () => dispatch({ type: 'SET_DRAGGED_ITEM', payload: item }),
    end: () => dispatch({ type: 'SET_DRAGGED_ITEM', payload: undefined }),
    
  });
  useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);
  return { drag };
};

【讨论】：

【解决方案2】：

上面的答案对我不起作用，我所做的是以下，我返回了 Item + dispatch 回调。不过还是谢谢你，你的回答给我指明了正确的方向。

import React from "react";

import { useDrag } from "react-dnd";
import { useAppState } from "./AppContext";
import { DragItem } from "./DragItem";



export const useItemDrag = (item: DragItem) => {
  const { dispatch } = useAppState();

  const [{ isDragging }, drag] = useDrag({
    type: item.type, //Contains data about the item we're trying to drag
   //Item replaced Begin in the new version of React DnD
    item: () => {
        return [item, 
            dispatch({
                type: "SET_DRAGGED_ITEM",
                payload: item
                }) //Need to return Item + action
        ]
    },

    end : () => 
        
        dispatch({
        type: "SET_DRAGGED_ITEM",
        payload: undefined
        })
    ,
        
    collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      })
    })
    
    return {drag}
}

【讨论】：