上下文变量未在子组件 React Context 中更新

Question

我的主组件中有多个子组件（通过递归生成的组件）。现在的问题是，当我更新父组件中的上下文变量时，子组件不会呈现更新后的值

这是我的上下文提供者

 function MainLayoutProvider({ children }) {
  const [mainJson, setMainJson] = useState([
    {
      component:'section',
      id:'1111',
      content:null,
      type:'section',
      cmType:'normal',
      class:'',
      style:{},
      props:{}
    }
  ]);

  return (
    <MainLayout.Provider value={mainJson}>
      <MainDispatchLayout.Provider value={setMainJson}>
        {children}
      </MainDispatchLayout.Provider>
    </MainLayout.Provider>
  );
}

这里我将它包含在我的主要组件中

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <MainLayoutProvider>
        <PlayGround></PlayGround>
      </MainLayoutProvider>
    </DndProvider>
  );
}

在 PlayGround 组件内部，还有另一个组件名为 DropSection，我在其中更新 'mainJson' 值

 function DropSection() {
    const board = useContext(MainLayout);
    const setBoard = useContext(MainDispatchLayout);
    const [{ isOver }, drop] = useDrop(() => ({
    accept: "image",
    drop(item, monitor) {
        const didDrop = monitor.didDrop();
        if (!didDrop ) {
            addItemToBoard(item.sectionName)
        }
    },
    collect: (monitor) => ({
        isOver: !!monitor.isOver(),
    }),
    }));
    const addItemToBoard = (sectionName) => {
        let newJson = {
            component:sectionName,
            id:IdGenerator(),
            content:null,
            type:'text',
            cmType:'normal',
            class:'',
            style:{},
            props:{}
        }
        setBoard((board) => [...board, newJson]);
    };
  
        
    return ( 
        <div  ref={drop}>
        <h4 className="text-center">DropZone</h4>
        {board.map((config,index) => <RenderCard key={config.id} config={config} />)}
        
        </div>
    );
  }

但是在 RenderCard 组件中，'mainJson' 的值没有更新或呈现，我得到的是在 MainLayoutContext 中初始化的旧值

function RenderCard({config}) {
    const board =useContext(MainLayout);
    const setBoard = useContext(MainDispatchLayout);
      const [{ isOver }, drop] = useDrop(() => ({
        accept: "image",
        drop(item, monitor) {
          const didDrop = monitor.didDrop();
          if (!didDrop ) {
            addItemToBoard(item.sectionName)
          }
          
      },
        collect: (monitor) => ({
          isOver: !!monitor.isOver(),
        }),
      }));

      const addItemToBoard = async (sectionName) => {
        let newJson = {
          component:sectionName,
          id:IdGenerator(),
          content:null,
          type:'text',
          cmType:'normal',
          class:'',
          style:{},
          props:{}
        }
        setBoard((board) => [...board, newJson]);
    };
    if(config.cmType == 'complex'){
      return RenderComplexCard(config)
    }
    var configProperty = {
      style: config.style,
      id:config.id,
    };

    return React.createElement(
      config.component,
      configProperty,
      config.content &&
        ( config.type == "section" && Array.isArray(config.content)  ? config.content.map(c => <RenderCard key={c.id}  config={c} />) : config.content )
    );  

}

Answer 1

我有类似的问题，并通过使用 useRef 钩子解决。

访问变量时不要忘记使用.current 来引用它。