react-beautiful-dnd如何处理后端数据 接口返回数据不显示问题排查

核心问题原因 #

• 状态初始化时机错误：columns 状态在组件首次渲染时用未完成请求的空 plannedDataSet 初始化，后续后端接口返回数据更新 plannedDataSet 时，没有同步更新 columns 状态，导致拖拽列始终拿不到后端数据
• 列ID动态生成问题：你用 uuid() 动态生成两列的ID，每次组件重新渲染都会生成新的ID，导致React状态匹配失败、拖拽逻辑异常
• 字段缺失问题：你渲染拖拽项时用到了travel/category/points等多个字段，但你解析unplannedDataSet的时候只取了id和brand，会导致渲染空值或报错

修复步骤 #

1. 固定列ID，不要动态生成uuid #

把原来的动态生成列ID改成固定值，避免每次渲染ID变化：

// 把原来的columnsFromBackend替换成固定ID的初始化值
const initColumns = {
  "itinerary": { // 固定ID，不要用uuid每次生成
   name: "行程规划",
   items: [] // 初始为空，等接口返回后再更新
 },
 "travel-options": { // 固定ID
   name: "出行选项",
   items: itemStarter 
 }
};
const [columns, setColumns] = useState(initColumns);

2. 接口返回数据后同步更新columns状态 #

在获取plannedDataSet的逻辑里，拿到数据后直接更新columns里对应列的items：

async function fetchPlannedData() {
  const response = await fetch('http://localhost:5000/planner/getPlannedItineraryData',  {
      method: "POST",
      headers: {jwt_token: localStorage.token}
  })
  const plannedDataSet = await response.json();
  setPlannedDataSet(plannedDataSet);
  // 新增：同步更新columns里行程列的items
  setColumns(prev => ({
    ...prev,
    "itinerary": {
      ...prev["itinerary"],
      items: plannedDataSet
    }
  }))
}

3. 补充数据解析的缺失字段（如用到unplannedDataSet需修改） #

// 解析unplannedDataSet的时候要把渲染需要的所有字段都加上
const parsedData = unplannedDataSet.map(element => ({
  id: element.id,
  travel: element.travel,
  brand: element.brand,
  category: element.category,
  Start: element.Start,
  End: element.End,
  points: element.points,
  value: element.value
}));

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