react-beautiful-dnd 和 mysql 状态管理

问题描述

好的。我对执行此操作的最佳方法感到困惑：

以下部分在起作用：一个 node js 服务器，一个客户端 react（带有 redux），一个 MysqL DB。

在客户端应用程序中，我有列表（很多但对于这个问题，假设一个），我希望能够通过拖放重新排序。

在 MysqL 数据库中，时间被存储以表示一个链表（带有 nextKey、lastKey 和 productionKey(primary)，以及数据字段），

//MysqL column [productionKey,lastKey,nextKey,...(other data)]

我目前遇到的问题是渲染问题。每次更改后都会断断续续。

我正在使用这两个函数来获取初始订单和重新排序

  function SortLinkedList(linkedList)   
  { 
  var sortedList = [];
  var map = new Map();
  var currentID = null;
  for(var i = 0; i < linkedList.length; i++)
      {
      var item = linkedList[i];
  
      if(item?.lastKey === null)
          {
          currentID = item?.productionKey;

          sortedList.push(item);
      }
      else
          {
          map.set(item?.lastKey,i);
      }
  }
  while(sortedList.length < linkedList.length)
      {
      var nextItem = linkedList[map.get(currentID)];

      sortedList.push(nextItem);
      currentID = nextItem?.productionKey;

  }
  
  const filteredSafe=sortedList.filter(x=>x!==undefined)
    //undefined appear because server has not fully updated yet,so linked list is broken
    //nothing will render without this
  
  return  filteredSafe
  ;
}

const reorder = (list,startIndex,endindex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex,1);
  result.splice(endindex,removed);

    const adjustedResult = result.map((x,i,arr)=>{
        if(i==0){
            x.lastKey=null;
        }else{
            x.lastKey=arr[i-1].productionKey;
        }
        if(i==arr.length-1){
            x.nextKey=null;
        }else{
            x.nextKey=arr[i+1].productionKey;

        }
        return x;
    })

  return adjustedResult;
};

我有这个功能来获取物品

const getItems = (list,jobList) =>
  {
   return list.map((x,i)=>{
    const jobName=jobList.find(y=>y.jobsessionkey==x.attachedJobKey)?.JobName;
        return {
            id:`ProductionCardM${x.machineID}ID${x.productionKey}`,attachedJobKey: x.attachedJobKey,lastKey:  x.lastKey,machineID:  x.machineID,nextKey:  x.nextKey,productionKey:  x.productionKey,content:jobName
        }
    })

  }

我的 onDragEnd

const  onDragEnd=(result)=> {
    if (!result.destination) {
        return;
      }
   
    // dropped outside the list
 

    const items = reorder(
      state.items,result.source.index,result.destination.index,);

        dispatch(sendAdjustments(items)); 
//sends update to server 
//server updates MysqL 
//server sends back update events from MysqL in packets
//props sent to DnD component are updated
       

  }

所以实际的错误看起来像是图形出现故障 - 因为在 sortLinkedList 函数中临时过滤了东西 - 导致跳动的 div。有没有更流畅的方法来处理这个客户端->服务器->DB->服务器->客户端数据流，从而在 DnD 中实现一致的处理？

更新：

仍在努力解决这个问题。当前实现了一个锁定模式。

  useEffect(()=>{
    if(productionLock){
    setState({
      items: SortLinkedList(getItems(data,jobList)),droppables: [{ id: "Original: not Dynamic" }]
    })
    setLoading(false);
    }else{
      console.log("locking first");
      setLoading(true);
    }
  },[productionLock])

其中生产锁定从服务器上的触发器设置为 true 和 false...

基本上：应用程序将数据发送到服务器，服务器处理请求，然后将新数据发送回来，完成后服务器发送解锁信号。

应该触发此更新发生一次，但它不会，它仍然会在每次从服务器到应用程序的状态更新时重新呈现。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）