diff --git a/src/Store/demos/nested.tsx b/src/Store/demos/nested.tsx index 28179ac..fc3ce7f 100644 --- a/src/Store/demos/nested.tsx +++ b/src/Store/demos/nested.tsx @@ -1,46 +1,26 @@ import { Button, Cascader, Form, Icon, Input, Tooltip } from 'antd'; import React, { useContext } from 'react'; -import { DrawerForm, ProDescriptions, SearchTable, Store, StoreContext } from 'widgets-v3'; +import { + DrawerForm, + ProDescriptions, + SearchTable, + Store, + StoreContext, + useStore, +} from 'widgets-v3'; import delay from 'delay'; -const residences = [ - { - value: 'zhejiang', - label: 'Zhejiang', - children: [ - { - value: 'hangzhou', - label: 'Hangzhou', - children: [ - { - value: 'xihu', - label: 'West Lake', - }, - ], - }, - ], - }, - { - value: 'jiangsu', - label: 'Jiangsu', - children: [ - { - value: 'nanjing', - label: 'Nanjing', - children: [ - { - value: 'zhonghuamen', - label: 'Zhong Hua Men', - }, - ], - }, - ], - }, -]; - const Child = () => { - const stores = useContext(StoreContext); - return
{JSON.stringify(stores)}
; + const component = useStore('component'); + const global = useStore('global'); + const unknown = useStore('unknown'); + return ( +
+
component: {JSON.stringify(component)}
+
global: {JSON.stringify(global)}
+
unknown: {JSON.stringify(unknown)}
+
+ ); }; export default () => ( @@ -55,23 +35,22 @@ export default () => ( }} name="global" > - {({ global }) => { + {(global) => { return (
-
username: {global.userInfo?.nickname}
+ {JSON.stringify(global)} { await delay(1000); return { - componentKey: 'componentKey', + componentInfo: 'componentInfo', }; }} name="component" > - {({ component, global }) => { + {(component) => { return (
-
global: {JSON.stringify(global)}
component: {JSON.stringify(component)}
@@ -270,18 +249,6 @@ export default () => ( > {getFieldDecorator('nickname', {})()} , - - {getFieldDecorator('residence', { - initialValue: ['zhejiang', 'hangzhou', 'xihu'], - // rules: [ - // { - // type: 'array', - // required: true, - // message: 'Please select your habitual residence!', - // }, - // ], - })()} - , ]; }, }} diff --git a/src/Store/index.tsx b/src/Store/index.tsx index 0fb22c0..eff7cbf 100644 --- a/src/Store/index.tsx +++ b/src/Store/index.tsx @@ -1,21 +1,26 @@ -import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { Spin, message } from 'antd'; +import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; +import { Spin } from 'antd'; +import { handleError } from 'src/_utils/handleError'; type StoreProps = { children?: (data: Record) => React.ReactNode; request?: () => Promise>; - name?: string; // 新增属性,用于标识每个Store + name?: string; // 用于标识每个Store的可选属性 }; +export const useStore = (name: string) => { + const context = useContext(StoreContext); + return context[name]; +}; + +// 创建一个context,用于保存按名称索引的数据 export const StoreContext = createContext>({}); const Store = ({ children, request, name }: StoreProps) => { const [loading, setLoading] = useState(false); const [data, setData] = useState>({}); const requestCounterRef = useRef(0); - - // 使用 useContext 获取上级 Store 提供的数据 - const parentData = useContext(StoreContext); + const context = useContext(StoreContext); // 使用context更新自己 const fetch = async () => { if (!request) return; @@ -26,16 +31,12 @@ const Store = ({ children, request, name }: StoreProps) => { if (currentRequestIndex === requestCounterRef.current) { setData(newData); + if (name) { + context[name] = newData; // 如果提供了名称,则在context中设置数据 + } } } catch (error) { - let errorMessage; - if (typeof error === 'string') { - errorMessage = error; - } else if (error instanceof Error) { - errorMessage = error.message; - } - console.log(error); - message.error(errorMessage || '请求视图数据失败'); + handleError(error, '请求视图数据失败'); } finally { if (currentRequestIndex === requestCounterRef.current) { setLoading(false); @@ -47,14 +48,9 @@ const Store = ({ children, request, name }: StoreProps) => { fetch(); }, []); - // 提供更新后的数据给子组件 - const value = useMemo(() => { - return name ? { ...parentData, [name]: data } : data; - }, [name, parentData, data]); - return ( - - {children?.(value)} + + {children?.(data)} ); }; diff --git a/src/index.ts b/src/index.ts index 3257277..10a0ff9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,7 +18,7 @@ export { default as EditableTabs } from './EditableTabs'; export { default as TabsForm } from './TabsForm'; export { default as FormDependency } from './FormDependency'; export { default as LoginForm } from './LoginForm'; -export { default as Store, StoreContext } from './Store'; +export { default as Store, StoreContext, useStore } from './Store'; export { default as FormField } from './FormField'; export { default as EditableGroups } from './EditableGroups'; export { default as GroupsForm } from './GroupsForm';