React中如何捕获并存储上一个悬停元素的状态？

你当前的代码只更新了当前悬停元素的状态，但没有对上一个悬停状态进行保存。问题出在你声明了prevNodeDetails这个ref但从未给它赋值，同时state也只维护了单一的当前值。下面提供两种可行的解决方案：

方案一：用State同时维护当前与上一个状态 #

把state设计成包含current（当前悬停数据）和previous（上一个悬停数据）的对象，每次hovered变化时，将旧的current值作为新的previous，再更新current为新的悬停数据：

import { useState, useEffect } from 'react';

// 初始化state为包含current和previous的对象
const [nodeDetails, setNodeDetails] = useState({ current: null, previous: null });

useEffect(() => {
  if (!hovered) return; // 处理hovered为空的边界情况

  // 深拷贝hovered，避免引用类型的浅拷贝问题
  // 如果hovered是简单对象，{...hovered}也可以；嵌套对象建议用JSON方法或自定义深拷贝
  const clonedHovered = JSON.parse(JSON.stringify(hovered));

  setNodeDetails(prevState => ({
    current: clonedHovered,
    previous: prevState.current // 将旧的当前值转为上一个值
  }));
}, [hovered]);

// 使用示例
console.log('当前悬停数据:', nodeDetails.current);
console.log('上一个悬停数据:', nodeDetails.previous);

方案二：用useRef单独存储上一个状态 #

如果只需要state维护当前值，上一个值用ref来保存（ref的更新不会触发组件重新渲染）：

import { useState, useEffect, useRef } from 'react';

const [currentNode, setCurrentNode] = useState(null);
const prevNodeRef = useRef(null); // 用ref存储上一个状态

useEffect(() => {
  if (!hovered) return;

  const clonedHovered = JSON.parse(JSON.stringify(hovered));
  // 先将当前state的值存入ref，作为上一个状态
  prevNodeRef.current = currentNode;
  // 再更新当前state为新的悬停数据
  setCurrentNode(clonedHovered);
}, [hovered, currentNode]);

// 使用示例
console.log('当前悬停数据:', currentNode);
console.log('上一个悬停数据:', prevNodeRef.current);

关于深拷贝的补充说明 #

• 如果hovered是单层简单对象，{...hovered}的浅拷贝足够用；
• 如果hovered是嵌套对象、包含数组或函数，浅拷贝会导致新旧对象共享引用，修改新对象会影响原数据，此时建议用JSON.parse(JSON.stringify(hovered))（注意：该方法无法序列化函数、Symbol等类型），或者自定义递归深拷贝函数。

内容的提问来源于stack exchange，提问作者deadant88