使用漂亮的 DND 拖放后，如何防止列表刷新超过 API？

Question

我在 https://codesandbox.io/s/adoring-booth-33vqo 中模拟了我的 Context + DND 问题。我还有其他组件将添加到此示例中，我将使用上下文挂钩在页面上共享值。

初始渲染后，一切看起来都很好。列表的想法是更改其自身的顺序，当使用拖放更改顺序时，它会抛出“Invalid Hook”错误。

所以（第一个）真正的问题是，是什么触发了这个链接到行

的错误

const { lang1Library, updateLang1Library } = useContext(LangContext) ;

在此先感谢您的帮助。地理位置

Answer 1

为整个项目提供 link 并不是一个好的方法，即使它很小。但我快速浏览了一下，你至少有一处做错了：

// DragEndFct.js
export default function DragEndFct(result, libName) {
  const { lang1Library, updateLang1Library } = useContext(LangContext);

这不是 React 组件，但它使用了一个钩子——这是错误的。 Hooks在React中有特殊的意义，应该正确使用(Rules of Hooks).

您不能在常规函数中使用挂钩并期望它们起作用。这就是您收到该错误的原因。

因此，您可以尝试多种方法来解决此问题。例如，DragEndFct 是一个常规函数，您可以声明更多参数并传递从上下文中获得的内容：

// you are using it in components right ?
function DragEndFct(result, libName, param3, param4) {}

// so you probably have access to the context there
// and can pass data from the context when you call it.
// something like this
onDragEnd={function (result) {
    console.log();
    DragEndFct(result, StaticVars.LANG1_LIBRARY_NAME, lang1Library, updateLang1Library);
}}

你甚至可以让 DragEndFct 成为一个 React 组件 - 它可以只是 return null（这意味着不会呈现 UI）但在那种情况下你会有钩子和那里的所有其他东西。这实际上取决于您需要什么以及如何使用它。

使用漂亮的 DND 拖放后，如何防止列表刷新超过 API？

How to prevent refresh of list over API after drag & drop with beautiful DND?

reactjs

react-beautiful-dnd

use-context