React中变量传值到拖拽组件后UI不更新问题求助

问题核心 #

你遇到的是React状态更新的引用依赖问题：React的useState只有当状态的引用发生改变时才会触发组件重渲染。如果直接修改原state引用的数组/对象（比如直接修改嵌套属性、用splice/push修改数组），即使值变了，引用没改，UI也不会更新——这就是为什么console能看到值，但页面没变化的原因。

具体修复步骤 #

1. 初始化columns时创建新引用
   不要直接把testData[0].flowNames赋值给column1.items，要通过深拷贝创建新的数组/对象，避免和原testData共享引用：

   const [columns, setColumns] = useState(() => {
     // 用structuredClone深拷贝，确保和原数据无引用关联
     const clonedFlowNames = structuredClone(testData[0].flowNames);
     return {
       column1: {
         title: 'Column 1',
         items: clonedFlowNames
       },
       // 其他列配置...
     };
   });
   

2. 拖拽更新时生成新的状态引用
   处理拖拽逻辑时，必须先深拷贝当前的columns状态，修改拷贝后的对象，再用setColumns传入新对象（保证引用变化）：

   const handleDragEnd = (result) => {
     if (!result.destination) return;
   
     const { source, destination } = result;
     // 深拷贝当前columns，避免直接修改原state
     const updatedColumns = structuredClone(columns);
     // 对items数组也做浅拷贝，保证数组引用更新
     const updatedItems = [...updatedColumns[source.droppableId].items];
     // 执行拖拽移动逻辑
     const [movedItem] = updatedItems.splice(source.index, 1);
     updatedItems.splice(destination.index, 0, movedItem);
     // 更新拷贝后的列数据
     updatedColumns[source.droppableId].items = updatedItems;
     // 设置新状态，触发重渲染
     setColumns(updatedColumns);
   };
   

3. 避免直接修改嵌套状态属性
   永远不要直接修改columns.column1.items这类嵌套属性，比如columns.column1.items.push(newItem)这种操作不会触发重渲染，必须通过拷贝生成新对象后再更新状态。

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