Блог

Главная - Вопросы по программированию - React: Как передать данные в функцию «useDrop»?

React: Как передать данные в функцию «useDrop»?

#reactjs

Вопрос:

У меня есть следующий компонент react

 export default function AssetDropZone({ testVal }) {
    console.log(testVal); //this one works

    const [{ canDrop, isOver, isDragging }, onDropTarget] = useDrop({
      accept: [ItemTypes.File],
      drop(item) {
        console.log(testVal) //this one returns undefined
      },
      collect: monitor => ({
        canDrop: monitor.canDrop(),
        isOver: monitor.isOver(),
        isDragging: monitor.getItem() !== null amp;amp; monitor.canDrop()
      })
    });
}

Я пытаюсь вывести testVal на печать, когда drop() выполняется метод, однако каждый раз, когда я его запускаю, значение testVal равно undefined .

Я знаю, что другие функции реакции, например useCallback() , имеют возможность передавать массив переменных, которые вы хотите использовать в функции, однако, когда я пытаюсь сделать то же самое с этим, это, похоже, не имеет никакого эффекта.

Я дважды проверил, что testVal определено, но в настоящее время я в недоумении относительно того, что происходит. У кого-нибудь есть опыт в этом деле?

Комментарии:

1. Можете ли вы показать, что используется AssetDropZone ? Похоже, для чего бы он ни использовался AssetDropZone , он передается неопределенным testVal .

2. Я отредактировал исходный пост, чтобы показать, что он действительно определен. Если я печатаю значение вне useDrop() вызова функции, то оно печатается правильно, если я печатаю его внутри, то оно не определено. Похоже, это какая-то проблема с областью применения, но я понятия не имею, как это обойти

3. AssetDropZone() компонент может быть вызван несколько раз. Называется ли undefined это в какое-либо время в будущем? Либо это, либо случайная установка testVal значения undefined позже-единственные причины, по которым он может «волшебным образом изменить значения».

4.Нет, только один раз печатаю на консоль и использую поиск по VS-коду, похоже, он больше нигде не используется, кроме одного раза, для которого я его использую. Как я уже говорил в OP, я столкнулся с аналогичной проблемой, useCallBack() когда был способ передать массив переменных, но useDrop сказал, что это работает таким образом, но я, похоже, не могу заставить его работать.

5. react-dnd.github.io/react-dnd/docs/api/use-drop Это утверждает, что он принимает массив зависимостей точно так же, как useMemo или useCallback или что-то еще. Просто для проверки, добавили ли вы определенные метки в консоль. журналы (например console.log('First test val', testVal) ), чтобы убедиться, что он никогда не был определен в первом?

Метки: