React Hooks State с сохранением предыдущего состояния (REACT DND)

Question

Я пытаюсь Dynami c setState, используя useState для объекта.

const [check, setcheck] = useState({
    q1:'',
    q2:''
})

, но мне не удается сохранить последнее состояние. Я использую реагировать и когда я начинаю перетаскивать, он очищает "Состояние". Я не уверен, что его рендеринг или что-то я делаю неправильно. У меня есть возможность установить состояние localStorage, но может кто-нибудь, пожалуйста, просмотрите мой блок кода, я буду благодарен.

следующий мой код

import React, { useState, useEffect } from "react";
import { useDrag } from "react-dnd";
import ItemTypes from "./ItemTypes";
const style = {..}
const ItemBox = ({ url, id, idref }) => {
  const [check, setcheck] = useState({
    q1: "",
    q2: ""
  });

  console.log(check, "CheckState");
  useEffect(() => {
    idref.current = { check };
  }, [check, idref]);
  const [{ isDragging }, drag] = useDrag({
    item: { id, type: ItemTypes.BOX },
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();
      if (item && dropResult) {

        // * here I am trying to set the state *

        setcheck({ ...check, [item.id]: dropResult.id });
      }
    },
    collect: monitor => ({
      isDragging: monitor.isDragging()
    })
  });

  const opacity = isDragging ? 0.4 : 1;
  return (
    <div
      id={id}
      ref={drag}
      style={{ ...style, opacity, backgroundImage: `url(${url})` }}
    />
  );
};
export default ItemBox;

Answer 1

Вы должны использовать версию обратного вызова setcheck, потому что useDrag кэширует параметры, которые вы передаете, чтобы check ссылался на первый раз check.

setcheck((currentCheck) => ({ ...currentCheck, [item.id]: dropResult.id }));