渲染不同的组件“y”时无法更新组件“x”（反应控制台警告问题）

Question

我正在尝试使用其中一个库来集成拖放列表以在不同列表之间进行反应。我正在使用 github 页面中的官方示例代码段，但是每次我将一个项目从一个列表移到另一个列表时，我都会在控制台中收到这个红色警告。这是组件的代码：

import React, { useEffect } from "react";

import {
  GridContextProvider,
  GridDropZone,
  GridItem,
  swap,
  move
} from "react-grid-dnd";
import "./stylesDots.css";

const Drag =()=> {
  const [items, setItems] = React.useState({
    left: [
      { id: 1, name: "ben" },
      { id: 2, name: "joe" },
      { id: 3, name: "jason" },
      { id: 4, name: "chris" },
      { id: 5, name: "heather" },
      { id: 6, name: "Richard" }
    ],
    right: [
      { id: 7, name: "george" },
      { id: 8, name: "rupert" },
      { id: 9, name: "alice" },
      { id: 10, name: "katherine" },
      { id: 11, name: "pam" },
      { id: 12, name: "katie" }
    ],
    rigdddd:   [
      { id: 13, name: "z" },
      { id: 14, name: "v" },
      { id: 15, name: "k" },
      { id: 16, name: "y" },
      { id: 17, name: "y" },
      { id: 18, name: "y" }
    ]
  });




  function onChange(sourceId, sourceIndex, targetIndex, targetId) {
    if (targetId) {
      const result = move(
        items[sourceId],
        items[targetId],
        sourceIndex,
        targetIndex
      );
      return setItems({
        ...items,
        [sourceId]: result[0],
        [targetId]: result[1]
      });
    }

    const result = swap(items[sourceId], sourceIndex, targetIndex);
    return setItems({
      ...items,
      [sourceId]: result
    });
  }

  return (
    <GridContextProvider onChange={onChange}>
      <div className="container">
        <GridDropZone
          className="dropzone left"
          id="left"
          boxesPerRow={4}
          rowHeight={70}
        >
          {items.left.map(item => (
            <GridItem key={item.id}>
              <div className="grid-item">
                <div className="grid-item-content">
                  {item.name[0].toUpperCase()}
                </div>
              </div>
            </GridItem>
          ))}
        </GridDropZone>
        <GridDropZone
          className="dropzone right"
          id="right"
          boxesPerRow={4}
          rowHeight={70}
        >
          {items.right.map(item => (
            <GridItem key={item.id}>
              <div className="grid-item">
                <div className="grid-item-content">
                  {item.name[0].toUpperCase()}
                </div>
              </div>
            </GridItem>
          ))}
        </GridDropZone>
      </div>
    </GridContextProvider>
  );
}

export default Drag;

这是确切的错误消息：

index.js:1 Warning: Cannot update a component (`GridContextProvider`) while rendering a different component (`GridItem`). To locate the bad setState() call inside `GridItem`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at GridItem (http://localhost:3002/static/js/vendors~main.chunk.js:31946:21)
    at div
    at GridDropZone (http://localhost:3002/static/js/vendors~main.chunk.js:31763:15)
    at div
    at GridContextProvider (http://localhost:3002/static/js/vendors~main.chunk.js:31499:21)
    at Drag (http://localhost:3002/static/js/main.chunk.js:314:74)
    at div
    at App
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2556
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:24002
scheduleUpdateOnFiber @ react-dom.development.js:21836
dispatchAction @ react-dom.development.js:16139
endTraverse @ GridContext.js:153
(anonymous) @ GridItem.js:21
callProp @ web.js:195
(anonymous) @ web.js:1478
fillArray @ web.js:254
(anonymous) @ web.js:1476
mountMemo @ react-dom.development.js:15846
useMemo @ react-dom.development.js:16219
useMemo @ react.development.js:1532
useSprings @ web.js:1476
useSpring @ web.js:1557
GridItem @ GridItem.js:16
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
onChange @ Drag.js:51
onSwitch @ GridContext.js:182
onEnd @ GridDropZone.js:105
handleEnd @ GridItem.js:56
onRelease @ index.js:223
handleEnd @ index.js:101
handleEndMouse @ index.js:266
Show 11 more frames

我尝试从一个空对象作为状态开始，然后用 useEffect 中的那些模拟数据填充它，但我仍然会得到同样的错误。关于如何解决这个问题的任何线索？ 谢谢。