react:反应表中的插值不起作用。可能是数据被破坏了

我有一个表视图,其中我从API获取数据,然后将该数据填充到表中。

出于某种原因,里面的数据 tbody 没有渲染,也没有错误。我认为这可能是因为我没有正确地破坏它。但是,无法纠正它。

PS:控制台登录 表格主体 确实有效,并且它们确实在控制台中显示信息。

更新: 用reactstrap的一张简单桌子做同样的事情,这张桌子也行得通。但第一个与 sorting table 不起作用。 不知道我哪里做错了。我想和她一起去 SORTING TABLE 更可取地。

表视图代码

       import React from "react";
import axios from "axios";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  Row,
  Col,
  Table,
} from "reactstrap";

// core components
import SortingTable from "components/SortingTable/SortingTable.js";

class RegularTables extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      siteData: [],
      isLoading: false,
    };
  }

  signal = axios.CancelToken.source();

  componentDidMount() {
    this.handleGetEdgeSeverInfo();
  }
  componentUnMount() {
    this.signal.cancel("Api is being canceled");
  }

  handleGetEdgeSeverInfo = async () => {
    this.setState({ isLoading: true });
    await axios
      .get("http://www.mocky.io/v2/5ec3786f300000800039c0a5")
      .then((response) => {
        // handle success
        this.setState({ siteData: response.data });
      })
      .catch((error) => {
        // handle error
        if (axios.isCancel(error)) {
          console.log("Unable to fetch", error.message);
        } else {
          this.setState({ isLoading: false });
        }
      });
  };

  render() {
    const { siteData } = this.state;
    return (
      <>
        <div className="content">
          <Row>
            <Col className="mb-5" md="12">
              <Card>
                <CardHeader>
                  <CardTitle tag="h4">
                   table (sorting table)
                  </CardTitle>
                  <hr />
                </CardHeader>
                <CardBody>
                  <SortingTable
                    thead={[
                      { text: "Ship" },
                      { text: "technology" },
                      { text: "https" },
                      { text: "type" },
                      { text: "Status" },
                    ]}
                    tbody={siteData.map((data) => {
                      console.log("name:", data.site.name);
                      console.log("type:", data.https);
                      console.log("IMO:", data.site.attributes.type);
                      console.log("model:", data.technology);
                      console.log("status:", data.status);
                      return (
                        <div>
                          <tr key={data.site}>
                            <td>{data.site.name}</td>
                            <td>{data.kind}</td>
                            <td>{data.site.attributes.IMO}</td>
                            <td>{data.model}</td>
                            <td>{data.status}</td>
                          </tr>
                        </div>
                      );
                    })}
                  />
                </CardBody>
              </Card>
            </Col>
            <Col className="mb-5" md="12">
              <Card>
                <CardHeader>
                  <CardTitle tag="h4">
                    table (simple table from reactstrap)
                  </CardTitle>
                  <hr />
                </CardHeader>
                <CardBody>
                  <Table>
                    <thead>
                      <tr>
                        <th>Ship</th>
                        <th>Type</th>
                        <th>IMO</th>
                        <th>Model</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {siteData.map((site) => {
                        console.log("name:", data.site.name);
                        console.log("type:", data.https);
                        console.log("IMO:", data.site.attributes.type);
                        console.log("model:", data.technology);
                        console.log("status:", data.status);
                        return (
                          <div>
                            <tr key={data.site}>
                              <td>{data.site.name}</td>
                              <td>{data.kind}</td>
                              <td>{data.site.attributes.IMO}</td>
                              <td>{data.model}</td>
                              <td>{data.status}</td>
                            </tr>
                          </div>
                        );
                      })}
                    </tbody>
                  </Table>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default RegularTables;

排序表组件代码

class SortingTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bodyData: props.tbody,
      column: {
        name: -1,
        order: "",
      },
    };
  }
  sortTable = (key) => {
    let { bodyData, column } = this.state;
    let order = "";
    if (
      (column.name === key && column.order === "desc") ||
      column.name !== key
    ) {
      order = "asc";
      bodyData.sort((a, b) =>
        a.data[key].text > b.data[key].text
          ? 1
          : a.data[key].text < b.data[key].text
          ? -1
          : 0
      );
    } else if (column.name === key && column.order === "asc") {
      order = "desc";
      bodyData.sort((a, b) =>
        a.data[key].text > b.data[key].text
          ? -1
          : a.data[key].text < b.data[key].text
          ? 1
          : 0
      );
    }
    this.setState({
      bodyData: bodyData,
      column: {
        name: key,
        order: order,
      },
    });
  };
  render() {
    const { bodyData, column } = this.state;
    return (
      <Table className="tablesorter" responsive>
        <thead className="text-primary">
          <tr>
            {this.props.thead.map((prop, key) => {
              return (
                <th
                  className={classnames(
                    "header",
                    {
                      headerSortDown:
                        key === column.name && column.order === "asc",
                    },
                    {
                      headerSortUp:
                        key === column.name && column.order === "desc",
                    },
                    {
                      [prop.className]: prop.className !== undefined,
                    }
                  )}
                  key={key}
                  onClick={() => this.sortTable(key)}
                >
                  {prop.text}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {bodyData.map((prop, key) => {
            return (
              <tr
                className={classnames({
                  [prop.className]: prop.className !== undefined,
                })}
                key={key}
              >
                {prop.data.map((data, k) => {
                  return (
                    <td
                      className={classnames({
                        [data.className]: data.className !== undefined,
                      })}
                      key={k}
                    >
                      {data.text}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </Table>
    );
  }
}

SortingTable.propTypes = {
  thead: PropTypes.arrayOf(
    PropTypes.shape({
      className: PropTypes.string,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  tbody: PropTypes.arrayOf(
    PropTypes.shape({
      className: PropTypes.string,
      data: PropTypes.arrayOf(
        PropTypes.shape({
          className: PropTypes.string,
          text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
            .isRequired,
        })
      ),
    })
  ).isRequired,
};