反应上下文杀死本地状态

时间:2020-10-04 14:30:07

标签: reactjs react-context react-state

我在我的应用程序中使用上下文。

在根目录下,我定义了上下文:

  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组件中的本地状态丢失(默认清除),我不明白为什么。我的代码有什么问题?正常的情境行为吗?

0 个答案:

没有答案