Reactjs 在子类中使用时，react js中未定义道具

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

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

{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>
  );
}

从“@material ui/core/styles”导入{makeStyles}”；
从“/InstructionModel”导入指令模态；
从“@material ui/core/List”导入列表；
从“@material ui/core/Divider”导入分隔器；
从“React”导入React，{Component}；
从“@material ui/core/Tooltip”导入工具提示；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/Zoom”导入缩放；
从“./quick/UserProfile”导入用户配置文件；
从“react bootstrap”导入{Button}；
从“react dom”导入{render}；
从“./测验/测试”导入测试；
导出默认功能临时抽屉（道具）{
const useStyles=makeStyles({
名单：{
宽度：680
},
完整列表：{
宽度：“自动”
}
});
const classes=useStyles（）；
常量[状态，设置状态]=React.useState({
上图：错，
左：错，
底部：错误，
右：错
});
const-toggleDrawer=（侧边，打开）=>事件=>{
如果(
event.type==“keydown”&&
（event.key==“Tab”| | event.key==“Shift”）
) {
返回；
}
设置状态（{…状态，[侧]：打开}）；
};
const sideList=side=>(
{this.props.people.map（（person，index）=>{
返回(
);
})}
);
返回(
{this.props.viewprof？侧列表：null}
右转
{侧列表（“右”）}
);
}

---

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

不要使用这个。道具只要使用道具就行了，因为你有无状态组件，没有状态

请分享你的子组件的完整代码你的组件不是类组件，而是功能组件。你可以通过

侧边.people

而不是

这个.props.people

@Chris那会接收我从父tho发送的数据吗？@Chris一旦我这样做了，我得到的地图功能是未定义的，我现在明白了。试着用

props

，没有

这个
与组件的状态无关。不，我的意思是子组件不是一个类它的功能组件，有状态和无状态是一个古老的术语来表示这一点。我不是你链接的文章的超级粉丝。它是重叠的状态和类/函数组件，它们不是相同的东西是的，因为在react钩子之前，拥有状态的唯一方法是使用类组件。现在你可以使用钩子了，就像OP实际使用的一样。@ArnaudClaudel看看这个，你会发现它有用吗