React TypeError，不是一个函数。

Question

我遇到了这个错误：TypeError: handleToggleSidebar不是一个函数，出现在Dashboard.js中。在src/components/SideBar.js中。

export const SideBar = ({collapsed}) => { 
    return(
         <ProSidebar collapsed={collapsed}>
         ... rest of the code
    )
};

在src/pages/Dashboard.js内部

export const SideBar = ({handleCollapsedChange}) => { 
    return(
         <GiHamburgerMenu className="Hamburger_icon" onClick={() => handleCollapsedChange(true)} />
         ... rest of the code
    )
};

在 src/App.js 文件中。

 function App() {
 const [collapsed, setCollapsed] = useState(false);
 const handleCollapsedChange = (checked) => {
     setCollapsed(checked);
 };
 return (
     <div className="App">
     <Router>
     <SideBar
      collapsed={collapsed}
      handleCollapsedChange={handleCollapsedChange}
     />
     ... rest of the code
 )
};

- deepak murthy

---

你好。你能提供 codesandbox 吗？ - noob_nerd

@noob_nerd - 这里是沙盒，点击 onclick 后会显示所提到的错误 - https://codesandbox.io/s/kind-smoke-do6gu?file=/src/App.js - deepak murthy

Answer 1

您需要期望不同的属性，而不是从App.js传递下来的属性。

export const SideBar = ({handleCollapsedChange}) => { 
    return(
         <GiHamburgerMenu className="Hamburger_icon" onClick={() => handleCollapsedChange(true)} />
         ... rest of the code
    )
};

请将您的App.js更改为以下内容，我更改了useState()，现在应该可以正常工作。

import React, { useState } from "react";
import { SideBar } from "./components/SideBar/SideBar";
import { Dashboard } from "./pages/Dashboard";
import Container from "react-bootstrap/Container";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";

function App() {
  const [collapsed, setCollapsed] = useState(false);

  const handleCollapsedChange = () => {
    setCollapsed(!collapsed);
  };

  return (
    <div className="App">
      <Router>
        <SideBar
          collapsed={collapsed}
          handleCollapsedChange={handleCollapsedChange}
        />
        <Container>
          <Switch>
            {/* <Route exact path="/" component={() => <Dashboard handleCollapsedChange={handleCollapsedChange} />} /> */}
            <Route 
              path='/'
              render={(props) => (
                <Dashboard {...props} handleCollapsedChange={handleCollapsedChange} />
              )}
/>
            <Redirect to="/404" />
          </Switch>
        </Container>
      </Router>
    </div>
  );
}

export default App;

我展示了两种<Route />组件的实现方式，但使用后一种（您可以删除已注释的部分）。

参考资料：

https://ui.dev/react-router-v4-pass-props-to-components/

- Shah

---

抱歉出了错，但是在更改后我仍然收到相同的错误 TypeError: handleCollapsedChange 不是一个函数。 - deepak murthy

我正在查看您在https://codesandbox.io/s/kind-smoke-do6gu?file=/src/pages/Dashboard.js:184-205上的codesandbox。您从未向您路由到的Dashboard组件提供任何props。您可以通过为Dashboard组件提供本地状态来修复此错误。重构代码，使Dashboard.js具有自己的本地状态，而不是从App.js传递状态。如果您的目标是让SideBar和Dashboard共享相同的状态，则只需要将props传递给Dashboard即可。 - Shah

<Route exact path="/" component={() => <Dashboard handleCollapsedChange={handleCollapsedChange} />} /> - Shah

您的 handleCollapsedChange 函数没有正确定义。我更新了解决方案。 - Shah