React Router V6 UseContextApi：对象 null 不可迭代

Question

我的代码有一个小问题。

所以，这是我第一次尝试在项目上实施上下文，但出现错误：

Uncaught TypeError: object null is not iterable (cannot read 属性 Symbol(Symbol.iterator))

我猜是因为对象没有被子组件访问。

这里是父组件（My Routes）

import {UserContext} from "../Context/UserContext"

function WebRoutes() {
  const [user,setUser]=useState(null);

  return (
    <UserContext.Provider value={(user,setUser)}>
    <Router>
        <Routes>
            <Route path="/" element={<Login/>}/>
            <Route path="/home" element={<Home/>}/>
            <Route path="/departaments" element={<Departaments/>}/>
            <Route path="/product/:id" element={<Product/>}/>
            <Route path="*" element={<NotFound/>}/>
        </Routes>
    </Router>
    </UserContext.Provider>
  )
}

这个将是子组件：

import React, {useState, useContext} from 'react'
import {UserContext} from '../../Context/UserContext';

const [user,setUser]=useContext(UserContext)

这就是我试图获取上下文的方式。

我不知道我哪里错了。

这是 UserContext 文件：

import {createContext} from "react"

export const UserContext = createContext(null);

如有任何帮助，我将不胜感激。我正在尝试通过课程来实现这一目标。

非常感谢。

Answer 1

问题

value={(user, setUser)}

您提供的上下文值不正确作为 comma operator 结果。

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.

这意味着您只提供 setUser 函数作为上下文值。

解决方案

如果您希望 UserContext 到 return 数组：

const [user, setUser] = useContext(UserContext);

那么你应该提供一个数组值：

function WebRoutes() {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={[user, setUser]}> // <-- array
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/home" element={<Home />} />
          <Route path="/departaments" element={<Departaments />} />
          <Route path="/product/:id" element={<Product />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Router>
    </UserContext.Provider>
  );
}

React Router V6 UseContextApi：对象 null 不可迭代

React Router V6 UseContextApi: object null is not iterable

javascript

reactjs

react-router-dom

react-context

Uncaught TypeError: object null is not iterable (cannot read 属性 Symbol(Symbol.iterator))

问题

解决方案