使用上下文包装应用程序组件并获取 TypeError: (destructured parameter) is undefined答案

【问题标题】：Wrapping the app component with a context and getting the TypeError: (destructured parameter) is undefined使用上下文包装应用程序组件并获取 TypeError: (destructured parameter) is undefined
【发布时间】：2021-06-05 02:22:06
【问题描述】：

我正在尝试将应用程序下的所有组件包装在一个上下文中以提供我想要的东西

（你可以看到它是我的 UserContext 组件）

enter code here
 
import React, { useState, createContext, useContext } from 'react'

const Context = createContext();
export let useUserContext = () => useContext(Context);

export default function UsersContext({ children }) {
  const [users, setUsers] = useState();

  const createUser = (user) => {
    if (!user.name || !user.email || !user.password) return;
    const newUsers = [...users, user];
    setUsers(newUsers);
  }

  return (
    <Context.Provider value={{ users, createUser }}>


      {children}
    </Context.Provider>
  )
}

（这是我的应用组件）

enter code here
  import Nav from "./components/nav/Nav";
  import Container from "./components/container/Container";
  import { BrowserRouter } from "react-router-dom";

  import UsersContext from "./components/contexts/UserContext";


  function App() {

    return (
      <UsersContext>
        <BrowserRouter>
          <Nav />
          <Container />
        </BrowserRouter>
      </UsersContext>
    );
  }

  export default App;

以前在我的项目中是这样的，我没有任何问题，但现在我收到的错误“TypeError: (destructured parameter) is undefined”还说这是因为 UserContext 中的孩子在我看来它不应该发生也许你可以帮助我找到我看不到的问题。

【问题讨论】：

我发现了问题。这是因为 useState 它是未定义的

标签： javascript node.js reactjs web frontend

【解决方案1】：

试试：<Context.Provider value={[ users, { createUser } ]}>

而不是：<Context.Provider value={{ users, createUser }}>

编辑：

也可以尝试：而不是

    const newUsers = [...users, user];
    setUsers(newUsers);

做

    setUsers((currentUsers) => [...currentUsers, user]);

【讨论】：

【解决方案2】：

我发现了问题。这是因为 useState。它是未定义的，我在 UserContext 调用与 useState 相关的属性。

【讨论】：