javascript - 如何在上下文 React 中传递状态

问题描述

我试图通过和更新一个状态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;

我收到这个错误

TypeError：无法读取未定义的属性（读取“名称”）；

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

标签： javascriptreactjsuse-context

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

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

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

  return (
   ...
  );
};

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

2. 创建上下文

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

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

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

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

javascript - 如何在上下文 React 中传递状态

问题描述

解决方案

推荐阅读