react：反应表中的插值不起作用。可能是破坏数据的东西

Question

我有一个表视图，在该视图中，我从API提取数据，然后将这些数据填充到表中。

由于某种原因，tbody内部的数据未渲染，也没有错误。我认为可能是因为我没有正确地对其进行销毁。但是，无法纠正它。

PS：tbody中的控制台日志确实起作用，并且确实在控制台中显示了信息。

表视图代码

import React, { Fragment } from "react";
import axios from "axios";

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

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

  handleSiteDataInfo = () => {
    axios
      .get("http://www.mocky.io/v2/5ec3786f300000800039c0a5")
      .then((response) => {
        // handle success
        const siteData = response.data;
        this.setState({ siteData });
      })
      .catch((error) => {
        // handle error
        console.log("Unable to connect", error);
      });
  };

  render() {
    const { siteData } = this.state;
    return (
      <>
        <div className="content">
          <Row>
            <Col className="mb-5" md="12">
              <Card>
                <CardHeader>
                  <CardTitle tag="h4">Site data</CardTitle>
                  <hr />
                </CardHeader>
                <CardBody>
                  <SortingTable
                    thead={[
                      { text: "site" },
                      { text: "https" },
                      { text: "technology" },
                      { text: "type" },
                    ]}
                    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 (
                        <Fragment>
                          <tr key={data.site}>
                            <td>{data.site.name}</td>
                          </tr>
                          <tr key={data.https}>
                            <td>{data.https}</td>
                          </tr>
                          <tr key={data.site.attributes.type}>
                            <td>{data.site.attributes.type}</td>
                          </tr>
                          <tr key={data.technology}>
                            <td>{data.technology}</td>
                          </tr>
                          <tr key={data.status}>
                            <td>{data.status}</td>
                          </tr>
                        </Fragment>
                      );
                    })}
                  />
                </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,
};

Answer 1

我认为您需要在<tr>中返回一个siteData.map。在CardBody中尝试此操作>

 <CardBody>
  <SortingTable
    thead={[
      { text: "site" },
      { text: "https" },
      { text: "technology" },
      { text: "type" }
    ]}
    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 (
        <tr key={data.site}>
          <td>{data.site.name}</td>
          <td>{data.https}</td>
          <td>{data.site.attributes.type}</td>
          <td>{data.technology}</td>
          <td>{data.status}</td>
        </tr>
      );
    })}
  />
</CardBody>;
在SortingTable.render（）

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.props.children.map((data, k) => {
              return (
                <td
                // className={classnames({
                //   [data.className]: data.className !== undefined
                // })}
                // key={k}
                >
                  {data.props.children}
                </td>
              );
            })}
          </tr>
        );
      })}
    </tbody>
  </Table>
);
}

我注释了一些代码，可以轻松重现此问题