在子类中使用时，props 在 React js 中未定义

Question

我试图从父类向子类发送一个值，但由于某种原因我得到了未定义的道具有什么帮助吗？ 这是父类并将数据发送给子类。 我已按要求添加了完整的子代码。我不确定如何添加道具，因为它是一个函数，当我尝试在其中添加道具时，我仍然收到道具未定义错误

{this.state.viewProfile ? (
                <SideProfileDrawer
                  people={this.state.people}
                  viewprof={this.state.viewProfile}
                />
              ) : null}

这是我在孩子中使用道具

    import { makeStyles } from "@material-ui/core/styles";
import InstructionsModal from "./instructionsmodal";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import React, { Component } from "react";
import Tooltip from "@material-ui/core/Tooltip";
import Drawer from "@material-ui/core/Drawer";
import Zoom from "@material-ui/core/Zoom";
import UserProfile from "../quiz/userProfile";
import { Button } from "react-bootstrap";
import { render } from "react-dom";
import Test from "../quiz/test";

export default function TemporaryDrawer(props) {
  const useStyles = makeStyles({
    list: {
      width: 680
    },
    fullList: {
      width: "auto"
    }
  });
  const classes = useStyles();
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false
  });

  const toggleDrawer = (side, open) => event => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [side]: open });
  };

  const sideList = side => (
    <div
      className={classes.list}
      role="presentation"
      onClick={toggleDrawer(side, false)}
      onKeyDown={toggleDrawer(side, false)}
    >
      {this.props.people.map((person, index) => {
        return (
          <UserProfile
            className="userProfile"
            levelRook={person.levelRook}
            levelStudent={person.levelStudent}
            levelIntermediate={person.levelIntermediate}
            levelExpert={person.levelExpert}
            levelMaster={person.levelMaster}
            score={person.Score}
            question={person.Questions}
            email={person.email}
            time={person.lastLogin}
          />
        );
      })}
    </div>
  );

  return (
    <div>
      {this.props.viewprof?sideList:null}
      <Button onClick={toggleDrawer("right", true)}>Open Right</Button>

      <Drawer
        anchor="right"
        open={state.right}
        onClose={toggleDrawer("right", false)}
      >
        {sideList("right")}
      </Drawer>
    </div>
  );
}

任何解决这个问题的帮助我都试过了

Answer 1

不要使用 this.props 只需使用 props 因为你有无状态组件而不是有状态 read more