增加通用provider实现发布后刷新

components/NavHeader/publishModal/index.tsx

 import { Button, Form, Input, Modal, Select } from "antd";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import { CommonContext } from "~/lib/commonProvider";
 import { useGeolocation } from "~/lib/hooks";
 import api, { PublishParams, TypeResp } from "./api";
 import styles from "./index.module.scss";
@@ -19,6 +20,8 @@ export default function PublishModal(props: Props) {
   });
   const [form] = Form.useForm();
   const position = useGeolocation();
+  const { reloadRequirements, setReloadRequirements } =
+    useContext(CommonContext);
   console.log("position", position);
 
   useEffect(() => {
@@ -40,6 +43,7 @@ export default function PublishModal(props: Props) {
         if (res.code === "200") {
           props.onCancel && props.onCancel();
           window.messageApi.success("发布成功");
+          setReloadRequirements(!reloadRequirements);
           setTimeout(() => {
             form.resetFields();
           }, 500);

lib/commonProvider.tsx

+import React, { createContext, Dispatch, SetStateAction, useState } from "react";
+
+export const CommonContext = createContext<{
+  reloadRequirements: boolean; //更新项目需求列表
+  setReloadRequirements: Dispatch<SetStateAction<boolean>>;
+}>({
+  reloadRequirements: false,
+  setReloadRequirements: () => {}
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+const CommonProvider = ({ children }: Props) => {
+  const [reloadRequirements, setReloadRequirements] = useState(false);
+
+  return (
+    <CommonContext.Provider
+      value={{
+        reloadRequirements,
+        setReloadRequirements,
+      }}
+    >
+      {children}
+    </CommonContext.Provider>
+  );
+};
+
+export default CommonProvider;

pages/_app.page.tsx

@@ -6,7 +6,8 @@ import { message } from "antd";
 import { useEffect } from "react";
 import Head from "next/head";
 import Script from "next/script";
-import UserProvider, { UserContext } from "~/lib/userProvider";
+import UserProvider from "~/lib/userProvider";
+import CommonProvider from "~/lib/commonProvider";
 
 export default function App({ Component, pageProps }: AppProps) {
   const [messageApi, contextHolder] = message.useMessage();
@@ -29,9 +30,11 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <Script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></Script>
       {contextHolder}
-      <UserProvider>
-        <Component {...pageProps} />
-      </UserProvider>
+      <CommonProvider>
+        <UserProvider>
+          <Component {...pageProps} />
+        </UserProvider>
+      </CommonProvider>
     </>
   );
 }

pages/projectInfo/components/requirements/index.tsx

 import { Button, Empty, Pagination, Popconfirm, Spin, Tooltip } from "antd";
 import router from "next/router";
 import React, { useState, useEffect, useContext } from "react";
+import { CommonContext } from "~/lib/commonProvider";
 import { UserContext } from "~/lib/userProvider";
 import api, { Item } from "./api";
 import styles from "./index.module.scss";
@@ -25,12 +26,13 @@ export default function Requirements(props: Props) {
   const [abort, setAbort] = useState<AbortController | null>(null);
   const [reload, setReload] = useState(false);
   const { userInfo } = useContext(UserContext);
-
+  const { reloadRequirements } = useContext(CommonContext);
+  
   useEffect(() => {
     //中断前一次请求
     abort?.abort();
     setAbort(new AbortController());
-  }, [pageParams, props.params, reload]);
+  }, [pageParams, props.params, reload, reloadRequirements]);
 
   useEffect(() => {
     if (!abort) {