Javascript React道具未返回，但在控制台中返回

我有以下项目要自学React和一些基本的后端知识-

我从API接收JSON，通过它进行映射，并返回带有要呈现的道具的行

在“client\src\components\Tables.jsx”中，我可以在控制台中从API输出数据，但无法在网页上呈现

我知道这可能是很愚蠢的事情，但我已经离开了，回来了，但仍然无法理解

如果您能再次看到这一点，我们将不胜感激

import React, { Component } from "react";
import Table from "react-bootstrap/Table";
import Row from "./Row";

class Tables extends Component {
  constructor() {
    super();
    this.state = {
      people: []
    };
  }

  componentDidMount() {
    fetch("/api/employees")
      .then(res => res.json())
      .then(people =>
        this.setState({ people }, () =>
          console.log("Employees fetched...", people)
        )
      );
  }

  render() {

    const rows = this.state.people.map(person => {
      //Log to show data is being returned
      console.log(person)
      return <Row key={(person.StaffID)} person={person.StaffName} />;
    });

    return (
      <React.Fragment>
        <Table bordered responsive>
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">In</th>
              <th scope="col">Out</th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </Table>
      </React.Fragment>
    );
  }
}

export default Tables;

import React，{Component}来自“React”；
从“反应引导/表格”导入表格；
从“/”行导入行；
类表扩展组件{
构造函数（）{
超级（）；
此.state={
人：[]
};
}
componentDidMount（）{
获取（“/api/employees”）
.then（res=>res.json（））
.然后（人=>
this.setState（{people}，（）=>
console.log（“获取员工…”，人员）
)
);
}
render（）{
const rows=this.state.people.map（person=>{
//显示正在返回数据的日志
控制台日志（个人）
返回；
});
返回(
#
名称
在里面
出来
{rows}
);
}
}
导出默认表；

从“react bootstrap”导入{按钮，折叠}；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“./style/row.css”；
类行扩展组件{
构造函数（）{
超级（）；
此.state={
登录：“登录”，
注销：“注销”，
D：错，
错：错，
网上：“，
离线：“，
开放：假
};
}
签名（）{
让今天=新日期（）；
让时间=
today.getHours（）+“：”+今天.getMinutes（）+“：“+今天.getSeconds（）；
this.setState（{signIn:time}）；
返回时间；
}
签出（）{
让今天=新日期（）；
让时间=
today.getHours（）+“：”+今天.getMinutes（）+“：“+今天.getSeconds（）；
this.setState（{signOut:time}）；
返回时间；
}
setStatusOnline（）{
这是我的国家({
在线：“动画”，
离线：“绿色”，
错：错，
注销：“注销”
});
}
setStatusOffline（）{
这是我的国家({
离线：“红色”，
D：错，
签名：“登录”
});
}
showHistory（）{
this.setState（prevState=>({
打开：！prevState.open
}));
}
render（）{
返回(
{this.props.person.StaffID}
{this.props.person.StaffName}
this.showHistory（）}
variant=“info”
>
历史
In:{this.state.signIn}


输出：
{
这个；
this.setState（{disabledIn:true}）；
这个.setStatusOnline（）；
}}
variant=“成功”
>
{this.state.signIn}
{
这个。注销（）；
this.setState（{disabledOut:true}）；
这个.setStatusOffline（）；
}}
>
{this.state.signOut}
);
}
}
导出默认行```

您正在将

person.StaffName

作为

person

道具传递给行组件。你应该只经过

人

返回；

我认为您在props中只传递了staffName，作为person={person.staffName}，这可能是一个字符串。在

行

映射中尝试这个person={person}

，这个

person={person.StaffName}

应该是

person={person}

？看起来

Row

需要的是整个人，而不仅仅是一个财产。@brianthonpson哇。。。我发誓我试过了！！成功了：）

import { Button, Collapse } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "../style/row.css";

class Row extends Component {
  constructor() {
    super();
    this.state = {
      signIn: "Sign-in",
      signOut: "Sign-out",
      disabledIn: false,
      disabledOut: false,
      online: "",
      offline: "",
      open: false
    };
  }

  signIn() {
    let today = new Date();
    let time =
      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    this.setState({ signIn: time });
    return time;
  }

  signOut() {
    let today = new Date();
    let time =
      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    this.setState({ signOut: time });
    return time;
  }

  setStatusOnline() {
    this.setState({
      online: "animated",
      offline: "green",
      disabledOut: false,
      signOut: "Sign-Out"
    });
  }

  setStatusOffline() {
    this.setState({
      offline: "red",
      disabledIn: false,
      signIn: "Sign-In"
    });
  }

  showHistory() {
    this.setState(prevState => ({
      open: !prevState.open
    }));
  }

  render() {
    return (
      <React.Fragment>
        <tr>
          <td>{this.props.person.StaffID}</td>
          <td>
            <span
              style={{ backgroundColor: this.state.offline }}
              className={this.state.online}
            ></span>
            {this.props.person.StaffName}
            <Button
              size="sm"
              style={{ marginLeft: "20px" }}
              onClick={() => this.showHistory()}
              variant="info"
            >
              History
            </Button>
            <Collapse in={this.state.open}>
              <div>
                In: {this.state.signIn}
                <br />
                Out:
              </div>
            </Collapse>
          </td>
          <td>
            <Button
              disabled={this.state.disabledIn}
              onClick={() => {
                this.signIn();
                this.setState({ disabledIn: true });
                this.setStatusOnline();
              }}
              variant="success"
            >
              {this.state.signIn}
            </Button>
          </td>
          <td>
            <Button
              disabled={this.state.disabledOut}
              variant="danger"
              onClick={() => {
                this.signOut();
                this.setState({ disabledOut: true });
                this.setStatusOffline();
              }}
            >
              {this.state.signOut}
            </Button>
          </td>
        </tr>
      </React.Fragment>
    );
  }
}

export default Row;```