我在我的应用程序中使用上下文。
在根目录下,我定义了上下文:
const AppWithContext = () => {
const [user, setUser] = useState()
const [token, setToken] = useState()
const [activeProfilesMap, setActiveProfilesMap] = useState<any>({})
return (
<AppContext.Provider
value={{
activeProfilesMap: activeProfilesMap,
setActiveProfilesMap: (m: any) => setActiveProfilesMap(m as any),
user: user,
setUser: (newUser: string) => {
setUser(newUser as any)
},
token: token,
setToken: (token: string) => {
setToken(token as any)
},
}}
>
<App />
</AppContext.Provider>
)
}
function App() {
return (
<Router>
<Header />
<Switch>
<Route path='/login' component={LoginPage} />
<Route path="/" component={() => <PageWrapper component={HomePage} title='Home' />} />
</Switch>
</Router>
);
}
在外部文件中定义了AppContext的地方:
import React from 'react'
const AppContext = React.createContext<any>({
user: null,
// eslint-disable-next-line no-unused-vars
setUser: (user: any) => { },
token: null,
// eslint-disable-next-line no-unused-vars
setToken: (token: any) => { },
activeProfilesMap: null,
setActiveProfilesMap: (map: any) => { },
})
export default AppContext
在<App />
中,还有一个具有本地状态的组件:
import { Button, Divider } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import React, { useState } from 'react';
const Create = () => {
const [text, setText] = useState('')
return (
<div>
<TextArea
rows={4}
value={text}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
/>
<Divider />
<pre>
{text}
</pre>
<Divider />
<Button type='primary'>
Send
</Button>
</div>
)
}
export default Create
一旦上下文在某些组件中发生更改:
const { activeProfilesMap, setActiveProfilesMap } = useContext(AppContext);
...
setActiveProfilesMap({})
Create
组件中的本地状态丢失(默认清除),我不明白为什么。我的代码有什么问题?正常的情境行为吗?