Почему функция обратного вызова в хуке react-dnd useDrop не может обновить состояние родительского компонента?

dnd Hook Api и хотите вызвать функцию обратного вызова родительского компонента для обновления состояния в функции useDrop drop, однако я могу обновить родительское состояние только из состояния инициализации.

Вот пример, независимо от того, как я перетаскиваю div в dropTarget, счетчик всегда обновляется до 1, но при нажатии кнопки он может обновляться, как я и ожидал, почему это происходит? и как это исправить?

https://codesandbox.io/s/reactdndexample3-gpc61?fontsize=14

import React, { useState } from 'react';
import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ as dnd, DropTarget } from 'react-dnd'
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend'
const { useDrag,useDrop } = dnd

function HookTest(props) {
  const [count,setCount] = useState(0);

  return (
    <div>
      <button onClick = {()=>{setCount(count + 1)}}>clickToAdd</button>
      <DropDiv addCount = {()=>{setCount(count + 1)}}></DropDiv>
      <DragDiv></DragDiv>
      <div>{count}</div>
    </div>
  );
}

export default DragDropContext(HTML5Backend)(HookTest)

function DropDiv(props) {
  const [collectedProps, drop] = useDrop({
    accept:"widget",
    hover:(item,monitor) => {
    },
    drop:(item,monitor)=>props.addCount(),
    collect:(monitor) => {
      return {
        isOver:monitor.isOver({shallow: true}),
      }
    }
  })
  return (
        <div ref = {drop} style = {{width:"100px",height:"100px",background:"blue"}}>
            dropTarget
        </div>
    )
}

function DragDiv(props) {
  const [dragSource,drag] = useDrag({
    item: {type:"widget"},
        collect: monitor => ({
            opacity: monitor.isDragging() ? 0.4 : 1,
        }),
  })

  return (
        <div ref = {drag} style = {{width:"100px",height:"100px",background:"red"}}>
            DragSource
        </div>
    )
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 861
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обновление не работает, потому что в контексте созданных функций для onClick и addCountcount всегда имеет значение 0.

Я рекомендую вам использовать альтернативный синтаксис setCount и передать функцию, которая получает предыдущее состояние в качестве аргумента и возвращает обновленное состояние.

<button onClick = {()=>{setCount(prevCount => prevCount + 1)}}>clickToAdd</button>
<DropDiv addCount = {()=>{setCount(prevCount => prevCount + 1)}}></DropDiv>

Рабочий пример

Это сработало, большое спасибо, но я все еще хочу понять, почему setCount(count + 1) не сработало.

Yin Waluo 17.05.2019 10:56

Другие вопросы по теме