[Bug] Chrome 或 Edge控制台显示Warning提示：Warning: Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

[DinoFeng]

Describe the bug Chrome or Edge browser console display: Warning: Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

To Reproduce 1.打开浏览器 2.按F12 3.点选控制台 4.地址栏输入（localhost:3000） 5.网页加载时控制台显示：(Chrome)

Expected behavior 控制台应该没有任何Warning或Error的提示

Screenshots 以下是Edge截图：

Deployment

• 开发中

Desktop (please complete the following information):

• OS: [Win10]
• Browser [Chrome, Edge]
• Version [96.0.4664.110 64位, 112.0.1722.34 64位]

[Yidadaa]

正常，react-dnd 库的报错，不影响使用。

[waltcow]

it seems very annoying in console

[DinoFeng]

@Yidadaa 这个Warning来自@hello-pangea/dnd 当我用div替换下DragDropContext，Droppable，Draggable问题解决。 是否有其他可以拖拉的第三方控件？或者这个Chat-list是否有拖拉的必要？ chat-list.tsx

import DeleteIcon from "../icons/delete.svg";
import styles from "./home.module.scss";
// import {
//   DragDropContext,
//   Droppable,
//   Draggable,
//   OnDragEndResponder,
// } from "@hello-pangea/dnd";

import { useChatStore } from "../store";

import Locale from "../locales";
import { isMobileScreen } from "../utils";

export function ChatItem(props: {
  onClick?: () => void;
  onDelete?: () => void;
  title: string;
  count: number;
  time: string;
  selected: boolean;
  id: number;
  index: number;
}) {
  return (
    <div id={`${props.id}`}>
        <div
          className={`${styles["chat-item"]} ${
            props.selected && styles["chat-item-selected"]
          }`}
          onClick={props.onClick}
        >
          <div className={styles["chat-item-title"]}>{props.title}</div>
          <div className={styles["chat-item-info"]}>
            <div className={styles["chat-item-count"]}>
              {Locale.ChatItem.ChatItemCount(props.count)}
            </div>
            <div className={styles["chat-item-date"]}>{props.time}</div>
          </div>
          <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
            <DeleteIcon />
          </div>
        </div>
    </div>
  );
}

export function ChatList() {
  const [sessions, selectedIndex, selectSession, removeSession, moveSession] =
    useChatStore((state) => [
      state.sessions,
      state.currentSessionIndex,
      state.selectSession,
      state.removeSession,
      state.moveSession,
    ]);
  const chatStore = useChatStore();

  // const onDragEnd: OnDragEndResponder = (result) => {
  //   const { destination, source } = result;
  //   if (!destination) {
  //     return;
  //   }

  //   if (
  //     destination.droppableId === source.droppableId &&
  //     destination.index === source.index
  //   ) {
  //     return;
  //   }

  //   moveSession(source.index, destination.index);
  // };

  return (
    <div>
      <div id="chat-list">
        <div className={styles["chat-list"]}>
          {sessions.map((item, i) => (
            <ChatItem
              title={item.topic}
              time={item.lastUpdate}
              count={item.messages.length}
              key={item.id}
              id={item.id}
              index={i}
              selected={i === selectedIndex}
              onClick={() => selectSession(i)}
              onDelete={() => chatStore.deleteSession(i)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

[Yidadaa]

拖拽排序对很多人是有必要的，所以为什么对这个 warning 这么念念不忘？你把控制台的 log 展示等级调成仅 log 不就行了？

[DinoFeng]

@Yidadaa , hello-pangea/dnd已经fix了，等更新 https://github.com/hello-pangea/dnd/issues/450