如何在 React Context 中传递 State

Question

我试图通过并更新状态useContext；

应用程序.js

import Home from './components/Home'
const UserContext = createContext();

function App() {
  const [name, setName] = useState('Name');

  return (
      <UserContext.Provider value={{name, setName}}>
        <Home/>
      </UserContext.Provider>
  );
}

export default App;

主页.js

import UserContext from '../../App'

function Home() {
    const user = useContext(UserContext);

    return (
        <>
        <label>Your name:</label>
        <input type='text' onChange={e => user.setName(e.target.value)} />
        <p>{user.name}</p>
        </>
    )
}

export default Home;

我收到这个错误

类型错误：无法读取未定义的属性（读取“名称”）；

使用 useContext 在组件之间传递状态的正确方法是如何？

Answer 1

您需要导出 UserContext，以便可以将其导入到需要它的组件中：

export const UserContext = React.createContext();

function App() {
  const [name, setName] = useState('Name');

  return (
    <UserContext.Provider value={{ name, setName }}>
      <Home />
    </UserContext.Provider>
  );
}

之后您可以将其导入您的应用程序组件中：

import { UserContext } '../../App'

function Home() {
    const user = useContext(UserContext);

    return (
        <>
            <label>Your name:</label>
            <input type='text' onChange={e => user.setName(e.target.value)} />
            <p>{user.name}</p>
        </>
    )
}

Answer 2

1. 设置动态上下文的父状态

首先，为了拥有可以传递给消费者的动态上下文，我将使用父级的状态。这确保了我拥有单一的事实来源。例如，我的父应用程序将如下所示：

const App = () => {
  const [name, setName] = useState("John");
  const value = { name, setName };

  return (
   ...
  );
};

该名称存储在状态中。稍后我们将通过上下文传递名称和 setter 函数setName。

2. 创建上下文

接下来，我创建了一个像这样的名称上下文：

// set the defaults
const NameContext = React.createContext({
  name: "John",
  setName: () => {}
});

在这里，我设置名称（“John”）和setName函数的默认值，该函数将由上下文提供者发送给消费者。这些只是默认值，我将在父应用程序中使用提供程序组件时提供它们的值。

3. 创建上下文消费者

为了让名称切换器设置名称并显示，它应该能够通过上下文访问名称设置器函数。它可能看起来像这样：

const NameSwitcher = () => {
const { name, setName } = useContext(NameContext);
 return (
    <label>Your name:</label><br />
    <input type='text' onChange={e => setName(e.target.value)} />
    <p>{name}</p>
  );
};

在这里，我只是将名称设置为输入值，但您可能有自己的逻辑来为此设置名称。

4. 将消费者包装在提供者中

现在，我将在 NameContext.Provider 中呈现我的名称切换器组件，并传入必须通过上下文发送到任何更深级别的值。这是我的父应用程序的样子：

const App = () => {
   const [name, setName] = useState("John");
   const value = { name, setName };

   return (
    <Name.Provider value={value}>
      <NameSwitcher />
    </Name.Provider>
   );
};