[UPDATE] [反应]：排序组件未呈现数据

问题描述 投票：0回答：1

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

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

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

UPDATE： 使用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,
};
reactjs interpolation destructuring react-table
1个回答
0
投票

我认为您需要在<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>
);

}

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.