解决react-beautiful-dnd报错：Unable to find draggable with id: x

问题场景 #

首次使用JS开发，参考YouTube教程基于react-beautiful-dnd制作类看板日历应用，尝试实现元素在数组间拖拽时，点击元素立即触发控制台报错Unable to find draggable with id: x，无法执行拖拽操作。

排查过程 #

通过console.log调试发现列表组件被多次渲染，最终定位到index.js中启用了React.StrictMode，删除该包裹标签后问题解决。

解决方案 #

移除index.js中包裹<App />的<React.StrictMode>标签即可修复该拖拽报错问题。

相关组件代码 #

Dia组件

import React from "react";
import { Droppable} from "react-beautiful-dnd";
import Actividad from "./Actividad";

export default function Dia({ nombre, actividades, id }) {
    return (
        <div>
            <h1>{nombre}</h1>
            <Droppable droppableId={id} className='dia-container'>
                {(provided) => (
                    <div ref={provided.innerRef} {...provided.droppableProps}>
                        {actividades.map((actividad, index) => (
                            <Actividad key={actividad.id} index={index} actividad={actividad} />
                        ))}
                        {provided.placeholder}
                    </div>
                )}

            </Droppable>
        </div>
    );
}

Actividad组件

import React from "react";
import { Draggable } from "react-beautiful-dnd";

export default function Actividad({actividad, index}){
    return(
        <Draggable draggableId={`${actividad.id}`} key={actividad.id} index={index}>
            {(provided) => (
                <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    <div>
                        <h3>{actividad.nombre}</h3>
                    </div>
                    {provided.placeholder}
                </div>
            )}
        </Draggable>
    );
}

问题根源与修复（index.js） #

原问题代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode> // 此处为问题所在，需删除
    <App />
  </React.StrictMode>
);

修复后代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

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