Question

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

我这样尝试过 https://codesandbox.io/s/sleepy-wozniak-3be3j

import React, { useState } from "react";
import ErrorContext from "./context";

const ErrorProvider = ({ children }) => {
  /**
   * Loading state/controls
   */

  const showErrorPopUp = () => {
    toggleErrorModal(prevState => {
      return {
        ...prevState,
        showError: true
      };
    });
  };

  const hideErrorPopUp = () => {
    toggleErrorModal(prevState => {
      return {
        ...prevState,
        showError: false
      };
    });
  };

  const errorPopUpState = {
    showError: true,
    showErrorPopUp,
    hideErrorPopUp
  };

  const [loading, toggleErrorModal] = useState(errorPopUpState);

  return (
    <ErrorContext.Provider value={loading}>{children}</ErrorContext.Provider>
  );
};

export default ErrorProvider;

我们能否使用React上下文在动态消息中显示错误模态

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

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

我收到此错误

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

如何以这种方式发送动态消息？

Answer 1

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

您正在渲染的应用程序将调用showErrorPopUp处理状态。因为您正在处理状态，所以组件正在更新，这意味着它将重新渲染调用showErrorPopUp的App，...这将重复进行直到应用程序崩溃。

有关如何使用钩子和ContextAPI的更多详细信息，请阅读此article，它将为您提供有关使用useEffect和useContext应该做什么的见解。

Answer 2

我告诉你发生了什么事。

只要您更改state，它就会重新呈现该组件。因此，当您进行递归调用时，请从state开始，进行更改，然后再次重复，然后重新渲染并重新渲染，直到应用程序崩溃为止，并发送错误消息。

如何使用React上下文和动态消息显示自定义模态或错误模态？

2 个答案: