关闭侧边栏崩溃响应应用程序

Question

我目前正在开发react.js中的仪表板应用程序。但是，在向涉及useState钩子组件的子组件添加了一些功能之后，每当我关闭/打开父组件中的侧栏时，应用程序就会崩溃。这是我得到的错误：

​

这是父组件：

import { Button } from "primereact/button";
import axios from "axios";
import { useContext, useState } from "react";
import { UserContext } from "../contexts/UserContext";
import { useNavigate } from "react-router-dom";
import { Sidebar } from "primereact/sidebar";
import { Divider } from "primereact/divider";
import { Avatar } from "primereact/avatar";
import { Menu } from "primereact/menu";
import "primeicons/primeicons.css";
import "../styling/page-home.css";
import Settings from "../components/dashboard/Settings";
import Stats from "../components/dashboard/Stats";

export default function PageHome() {


  const context = useContext(UserContext);

  const navigate = useNavigate();

  const dummyUser = {
    username: "Jane Doe",
    email: "example@company.com",
    image: "./media/avatar-picture.jpeg",
  };

  const [content, setContent] = useState(Settings);

  let menuItems = [
    { label: "Dashboard", icon: "pi pi-fw pi-th-large" },
    { label: "Planning", icon: "pi pi-fw pi-calendar" },
    { label: "Offertes", icon: "pi pi-fw pi-file" },
    { label: "Facturen", icon: "pi pi-fw pi-euro" },
    { label: "Webshop", icon: "pi pi-fw pi-shopping-bag" },
    { label: "Statistieken", icon: "pi pi-fw pi-chart-bar", command:() => {setContent(Stats)} },
  ];

  let settings = [{ label: "Settings", icon: "pi pi-fw pi-cog", command:() => {setContent(Settings)}  }];

  const logout = () => {
    axios.post(process.env.REACT_APP_API + "/auth/logout").then((res) => {
      if (res.data.msg === "ok") {
        context.logout();
        navigate("/login");
      }
    });
  };

  const [visible, setVisible] = useState(true);

  return (
    <>
      <div className="page-home">
        <Button icon="pi pi-arrow-right" onClick={(e) => setVisible(true)} />

        <Sidebar
          showCloseIcon={false}
          className="p-0 p-sidebar-sm border-none shadow-8 z-0"
          visible={visible}
          modal={false}
          onHide={() => setVisible(false)}
        >
          <div className="sidebar-container flex flex-column justify-content-between h-full">
            <div className="sidebar-container-top">
              <div
                id="logo-box"
                className="flex flex-row align-items-center gap-3 pl-2"
              >
                <Avatar image="./media/mbt-logo.jpeg" size="medium" />
                <h3 className="opacity-50">THAN GIFTS</h3>
              </div>
              <Divider className="opacity-30"/>
              {/*User card */}
              <div className="flex flex-row align-items-center gap-3 py-5 px-2">
                <Avatar
                  className="p-0"
                  image={dummyUser.image}
                  size="large"
                  shape="circle"
                />
                <div id="avatar-info">
                  <div className="font-bold" id="avatar-info-username">
                    {dummyUser.username}
                  </div>
                  <div className="text-sm opacity-40" id="avatar-info-email">
                    {dummyUser.email}
                  </div>
                </div>
              </div>
              <Menu className="border-none" model={menuItems} />
              <Divider className="opacity-30"/>
              <Menu className="border-none" model={settings} />
            </div>
            <Button
              className="p-button-secondary p-button-text"
              onClick={() => {
                setVisible(false);
              }}
            >
              {" "}
              <i className="pi pi-fw pi-window-minimize pr-4" />
              Toggle sidebar
            </Button>
          </div>
        </Sidebar>

        <div
          id="main-container"
          className="flex flex-row justify-content-center align-items-center z-1"
          legend={context.user_name}
          style={{ marginLeft: visible ? "20rem" : "0rem" }}
        >
          {content}
        </div>
      </div>
    </>
  );
}

这是子部分：

import React from "react";
import { Card } from "primereact/card";
import { Password } from "primereact/password";
import { useState } from "react";
import { Fieldset } from "primereact/fieldset";
import { InputText } from "primereact/inputtext";

export default function Settings() {
  const [password, setPassword] = useState("");
  return (
    <Card title="Settings" className="w-full m-5">
      <Fieldset legend="Wachtwoord wijzigen">
        <div className="p-4">
          <h5>Huidig wachtwoord</h5>
          <Password value={password} onChange={(e)=>{setPassword(e.target.value)}} toggleMask feedback={false}/>

          <h5>nieuw wachtwoord</h5>
          <Password toggleMask />

          <h5>herhaal wachtwoord</h5>
          <Password toggleMask feedback={false}/>
        </div>
      </Fieldset>
    </Card>
  );
}

如果有人知道是什么在抛出这些错误，以及如何解决这些错误，我将很高兴听到你的消息。:)

Answer 1

发生此错误是因为您正在执行：

 const [content, setContent] = useState(Settings);

而设置是一个组件。当useState接收到一个返回值的函数时，这个函数称为惰性初始状态。在这种情况下，react试图将返回Settings组件的值设置为内容的初始状态，而不是组件。

解决这个问题的一个简单方法是：

const [Content, setContent] = useState(() => Settings);
//...
return (
//...
  {<Content />}

但是将组件存储为状态有点奇怪，我认为最好使用react路由器，或者，如果您只有几个可能的内容，则使用一个标志来指示必须显示哪个。