React拖拽功能中useState无法加载后端返回的columns数据如何解决

• useState 仅会在组件首次渲染时读取初始值，你初始化 columns 时异步接口还未返回数据，此时 productsList 是空数组，所以 Inprogress 列的初始 items 为空
• 后续异步请求完成更新 productsList 后，columns 状态不会自动同步变化，因此数据无法正常加载

调整 columns 初始化逻辑，新增监听 productsList 变化的副作用，数据返回后主动更新对应列的条目：

1. 固定列唯一标识 #

提前生成列的 uuid 避免每次渲染重新生成导致拖拽状态丢失，初始化 columns 时先将 Inprogress 列的 items 置空：

// 提前生成固定列ID，避免重复生成丢失状态
const [columnIds] = useState({
  inProgress: uuid(),
  schedule: uuid(),
  rejection: uuid(),
  waiting: uuid()
})

// 初始化列结构，初始items为空
const [columns, setColumns] = useState({
  [columnIds.inProgress]: {
    name: "Inprogress", 
    items: []
  },
  [columnIds.schedule]: {
    name: "Schedule",
    items: []
  },
  [columnIds.rejection]: {
    name: "Rejection",
    items: []
  },
  [columnIds.waiting]: {
    name: "Waiting",
    items: []
  }
});

2. 新增数据同步副作用 #

监听 productsList 变化，数据拉取完成后自动更新对应列的条目：

useEffect(() => {
  if (productsList.length) {
    setColumns(prevColumns => ({
      ...prevColumns,
      [columnIds.inProgress]: {
        ...prevColumns[columnIds.inProgress],
        items: productsList
      }
    }))
  }
}, [productsList, columnIds.inProgress])

如果后端返回的 data.candidate 本身已经是数组格式，可以去掉 JSON.parse(savedate) 步骤，避免序列化异常。

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