警告：道具`data-rbd-draggable-id` 不匹配服务器：“苹果”客户端：“香蕉”

问题描述

我有一个 JSON 数据源，我从中生成了一个随机项目列表，我用这些项目填充我的 Draggable <Item> 组件。在我实现随机器之前，我使用了预先指定的项目，确认拖放工作正常，而且我之前遇到过服务器错误，导致我将 resetServerContext() 合并到 dom.js 文件中，解决了这个问题。

但是现在，随着随机生成器的实现，拖放操作再次抛出这些与服务器相关的错误，表明服务器和客户端正在接收由随机生成器生成的不同项目。

这是我的设置，结合了 react-beautiful-dnd tutorial 和 Reactful 的服务器端 React 设置：

/components/App.js:

import * as React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import data from '../data';
import Column from './Column';

...
//Constructor for randomising a list of items and populating the state with them
//Function for drag and drop end 
//render return function,including a mapping of items these items to <Item> components within <Column> components

/renderers/dom.js:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { resetServerContext } from 'react-beautiful-dnd';

import App from 'components/App';

import '../styles/index.css';

resetServerContext();

ReactDOM.hydrate(
  <App initialData={window.__R_DATA.initialData} />,document.getElementById('root'),);

/renderers/server.js:

import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';
import { resetServerContext } from 'react-beautiful-dnd';
import App from 'components/App';

export async function serverRenderer() {
  resetServerContext();
  const initialData = {
    appName: 'myProject',};

  const pageData = {
    title: `${initialData.appName}`,};

  return Promise.resolve({
    initialData,initialMarkup: ReactDOMServer.renderToString(
      <App initialData={initialData} />,),pageData,});
}

这个设置工作得非常好直到我在 App.js 的构造函数中实现了随机化，我不会在这里包含这些代码，除非被问到，因为这个概念很长而且代码很复杂。我怀疑随机化发生在服务器端和客户端，这可以解释为什么值不匹配，但我不确定为什么或如何。我还在这里提到：https://github.com/atlassian/react-beautiful-dnd/issues/323 这让我怀疑这个问题与请求多个项目有关。

我的核心问题是：

1. 我是否选择随机选择项目并填充 在 App.js 的构造函数中用它们说明一个好动作？或者应该 这种随机化发生在其他地方，例如在serverRenderer() renderers/server.js 中的函数？
2. 如果随机化和状态总体在目前的情况下很好，那么我对 resetServerContext(); 的放置是否也正确和合理？我认为在我添加随机化之前它会起作用，但是由于我遇到了这个问题，所以我试图将它放在其他地方无济于事。我提到了这个问题：How to fix `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js 但他们正在使用 next.js，而我不是，所以他们的结构没有反映我所拥有的任何东西。

解决方法

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

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

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