Javascript 如何使用带有动态消息的react上下文显示自定义模式或错误模式？

你能告诉我吗 如何使用带有动态消息的react上下文显示自定义模式或错误模式？

我试过这样做

import React，{useState}来自“React”；
从“/context”导入ErrorContext；
常量错误提供程序=（{children}）=>{
/**
*加载状态/控件
*/
常量参数=（）=>{
toggleErrorModal（prevState=>{
返回{
…国家，
罗：是的
};
});
};
常量hideErrorPopUp=（）=>{
toggleErrorModal（prevState=>{
返回{
…国家，
罗：错
};
});
};
常量errorPopUpState={
罗：是的，
淋浴器弹出，
隐藏者弹出窗口
};
常量[loading，toggleErrorModal]=使用状态（errorPopUpState）；
返回(
{儿童}
);
};
导出默认错误提供程序；

我们是否可以使用react context用动态消息显示错误模式

function App() {
  const { showErrorPopUp, hideErrorPopUp } = useContext(ErrorContext);

  return <div className="App">{showErrorPopUp()}</div>;
}

函数应用程序（）{
const{shortErrorPopup，hideErrorPopUp}=useContext（ErrorContext）；
返回{showErrorPopUp（）}；
}

我得到了这个错误

超出了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环

---

如何在此模式下发送动态消息？

您正在使用弹出窗口进行递归调用。让我解释一下你的代码是怎么回事：

您正在呈现调用处理状态的弹出窗口的应用程序。因为您正在处理状态，所以组件正在更新，这意味着它将重新启动调用Popup…的应用程序，并且这将一直重复，直到应用程序中断

---

有关如何使用钩子和ContextAPI的更多详细信息，请阅读本文，它将为您提供有关如何使用useEffect和useContext的见解。

让我告诉您发生了什么

---

无论何时更改

状态

，它都会重新启动组件。因此，当您执行递归调用时，您从

状态开始，对其进行更改，然后它再次重复并重新播放，直到应用程序中断，发送错误消息。
我知道了，你能帮我用动态消息弹出这个自定义错误吗？首先阅读文章，试着了解钩子和上下文API是如何工作的，然后试着了解自己。如果你被卡住了，带着你写的代码来这里，我会帮助你。好的。。。！！我会读的..你能检查一下我的更新代码吗..没问题。我明白你的意思，…我重构了我的代码，但我的错误弹出窗口仍然没有显示看到错误弹出窗口没有显示，然后我不知道。我使用
useffect
第一次调用，但仍然没有显示我明白你的意思，…我重构了我的代码，但我的错误弹出窗口仍然没有显示，然后，我会告诉你，为什么需要动态消息。当我创建错误响应程序时，我总是使用
window.confirm（）
。首先，感谢您提供可运行的代码。看一看发生了什么很容易。其他人已经回答了这个问题，所以我用你的沙箱来实现它。只需在输入中键入消息的内容，然后单击“显示模式”

。我使用了上下文API，并参考了Kent C.Dodd的帖子

function App() {
  const { showErrorPopUp, hideErrorPopUp } = useContext(ErrorContext);

  return <div className="App">{showErrorPopUp()}</div>;
}