React Context API不适用于单个应用程序对话框

我想创建一个对话框组件以呈现一次并在整个应用程序中使用它，而不是每次需要显示对话框时都创建一个对话框组件。

上下文API最初正确显示了对话框。如果对话框仅包含静态文本，则可以正确显示。但是，如果对话框包含任何动态元素，则它不会对更改做出反应。

我使用自定义钩子处理对话框。

这是一个带有静态文本的对话框示例，该对话框有效：

export function useStaticTextDialog(callback) {
  const appContext = useContext(AppContext);

  const openDialog = () => appContext.openAppDialog(appDialogContext);
  const onDialogOk = () => {
    appContext.closeAppDialog(); // close unique app dialog first in case the callback uses it
    callback();
  };

  const appDialogContext = {
    title: 'Static text',
    content: 'This static text works.',
    onOk: onDialogOk,
    onClose: appContext.closeAppDialog,
  };

  return { open: openDialog };
}

它的名称如下：

 const staticTextDialog = useStaticTextDialog(callback);
 staticTextDialog.open();

单个组件在App组件中呈现一次：

import AppDialog from 'components/appDialog';

function App() {
  return (
    <AppContextProvider>
      <Router />
      <AppDialog />
    </AppContextProvider>
  );
}

上下文非常简单：

import React, { createContext, useState } from 'react';

const AppContext = createContext();

function AppContextProvider({ children }) {
  const [isAppDialogOpen, setIsAppDialogOpen] = useState(false);
  const [appDialogContext, setAppDialogContext] = useState({});

  const openAppDialog = appDialogContext => {
    setAppDialogContext(appDialogContext);
    setIsAppDialogOpen(true);
  };
  const closeAppDialog = () => setIsAppDialogOpen(false);

  const appContextValue = {
    isAppDialogOpen,
    appDialogContext,
    openAppDialog,
    closeAppDialog,
  };

  return <AppContext.Provider value={appContextValue}>{children}</AppContext.Provider>;
}

export { AppContext, AppContextProvider };

好吧，到目前为止可行。但是，如果将动态元素添加到对话框中，则它不会对更改做出反应并显示陈旧的值：

export function useDynamicTextDialog(callback) {
  const appContext = useContext(AppContext);
  const [name, setName] = useState();

  const openDialog = newName => {
    setName(newName);
    appContext.openAppDialog(appDialogContext);
  };
  const onDialogOk = () => {
    appContext.closeAppDialog(); // close unique app dialog first in case the callback uses it
    callback(name);
  };

  const appDialogContext = {
    title: 'Overwrite warning',
    content: `The name "${name}" already exists. Are you sure you want to overwrite it?`,
    onOk: onDialogOk,
    onClose: appContext.closeAppDialog,
  };

  return { open: openDialog };
}

如果对话框包含表单元素（例如文本框或下拉列表），则该对话框也将不起作用。它不会对用户的新值做出反应。

我发现此行为是意外的，我认为它应该对更改做出反应并正常工作。实际上，当呈现多个对话框组件时（每次需要一个对话框时），这种方法同样有效。在这种情况下，不使用上下文API。例：

import DialogTemplate from 'components/dialogTemplate';

export function useDynamicTextDialog(callback) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [name, setName] = useState();

  const openDialog = newName => {
    setName(newName);
    setIsDialogOpen(true);
  };
  const closeDialog = () => setIsDialogOpen(false);
  const onDialogOk = () => {
    closeDialog ();
    callback(name);
  };

  const dialogContext = {
    title: 'Overwrite warning',
    content: `The name "${name}" already exists. Are you sure you want to overwrite it?`,
    onOk: onDialogOk,
    onClose: closeDialog,
  };

  const Dialog = <DialogTemplate dialogContext={dialogContext} />;

  return { Dialog, open: openDialog };
}

然后它在某个地方打开，就像单个应用程序对话框一样：

 const dynamicTextDialog = useDynamicTextDialog(callback);
 dynamicTextDialog.open();

但是在这种情况下，必须渲染每个对话框组件：

function Component() {
  const { dynamicTextDialog } = useDynamicTextDialog();

  return (
    <div>
      {...more elements}
      {applicationClosingWarningDialog.Dialog}
    </div>
  );
}

因此，如果使用20个对话框，则必须渲染20个对话框组件，尽管它们的内容几乎相同。

这就是为什么我只想对整个应用程序使用一个对话框组件，每次都重复使用它，并只是更改内容。但是上下文API不起作用。

为什么即使使用相同的方式来处理对话框模板的示例，也不能使用带有Context的应用程序对话框的示例，该示例为何起作用？

如何使其与Context API一起使用？