reactjs - [更新][反应]:排序组件不呈现数据
问题描述
我有一个表视图,我在其中从 API 获取数据,然后将该数据填充到表中。
由于某种原因,里面的数据tbody
没有渲染,也没有错误。我认为这可能是因为我没有正确解构它。但是,无法纠正。
PS:里面的控制台日志tbody
确实有效,它们确实在控制台中显示了信息。
更新: 使用 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,
};
解决方案
我认为您需要<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>
);
}
我注释掉了一些代码以轻松重现该问题
推荐阅读
- django - get() 接受 1 个位置参数,但给出了 2 个:Django Rest
- reactjs - ReactJS 中的条件功能组件渲染
- reactjs - react-grid-layout 中奇怪的压缩行为
- firebase - How to ensure the FieldValue.serverTimestamp() finish executing in Cloud Firestore before I get the latest data on my listener?
- python - Git difftool 不工作 Windows 10 Git Bash
- c++ - 有没有办法知道 Tracer 是否成功完全连接到 jaegerclientcpp 中的 jaeger 后端服务器?
- websphere - IBM Domino - 哪个文档对于组是唯一的
- amazon-web-services - 如何为 Fargate 任务提供上传到 S3 的正确权限
- javascript - 如何将 @vue/apollo-composable 添加到 Quasar 框架
- c++ - 转置表导致测试失败(但在游戏中运行良好)