如何在 Context React 中传递状态

Question

我正在尝试通过 useContext 传递和更新状态；

App.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;

Home.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;

我遇到了这个错误

TypeError: Cannot read properties of undefined (reading 'name');

如何使用 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>
  );
}

之后你可以在你的App组件中导入它：

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。为动态上下文设置父状态

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

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

  return (
   ...
  );
};

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

2。创建上下文

接下来，我创建了一个 name 上下文，如下所示：

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

这里我设置了 name ('John') 的默认值和一个 setName 函数，它将被发送消费者的上下文提供者。这些只是默认值，我将在父应用程序中使用提供者组件时提供它们的值。

3。创建上下文消费者

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

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>
  );
};

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

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

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

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

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

如何在 Context React 中传递状态

How to pass State in Context React

javascript

reactjs

use-context