Question

未捕获的类型错误：对象 null 不可迭代（无法读取属性 Symbol（Symbol.iterator））

2022-03-02

8365

reactjs

错误是

未捕获的 TypeError：对象 null 不可迭代（无法读取属性 Symbol(Symbol.iterator)）

import React from 'react';
import { NavigationBar } from './components/header/Navbar';
import {Outlet} from "react-router-dom"


export default function App(){
  const [account, setAccount] = React.useState<string>('')
  return (
    <div className="App">
      <NavigationBar />
        <Outlet context={[account, setAccount]}/>
    </div>
  );
}

我在行 const {account, setAccount} = useOutletContext(); 上收到错误以下是需要 account 和 setAccount 的代码片段。

import { useOutletContext } from "react-router-dom";
const NavigationBar:React.FC = () => {
    const [account, setAccount] = useOutletContext();
    // rest of the code
}

Answer 1

您正在使用 useOutletContext 作为对象，但它是一个数组。因此，在这种情况下， { 应该是 [] 。

将其更改为

const [account, setAccount] = useOutletContext();

文档： https://reactrouter.com/docs/en/v6/api#useoutletcontext

现在您收到 Symbol.iterator 错误：您应该在父路由上设置上下文并在内部路由上使用上下文。在您当前的代码中，您正在同一级别上设置和使用它。

请参阅此 codesandbox 以获取工作示例： https://codesandbox.io/s/useoutletcontext-eg1fxb

以下是来自沙盒的代码，供完整参考

import React from "react";
import { Outlet, Routes, Route, BrowserRouter } from "react-router-dom";
import { useOutletContext } from "react-router-dom";

const Dashboard = () => {
  const [account, setAccount] = React.useState("ACCOUNT-NAME");
  return (
    <div className="App">
      <h1>Outer route</h1>
      <Outlet context={[account, setAccount]} />
    </div>
  );
};

const DashboardInner = () => {
  const [account, setAccount] = useOutletContext();
  return <div>Account: {account}</div>;
};

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Dashboard />}>
          <Route path="/" element={<DashboardInner />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}