javascript - 如何在比较表中显示 json api 数据?
问题描述
我是 react js 的新手,我有 json 数据,我想在图像的比较表中显示这个 json api,但我不知道该怎么做我在这里尝试的是我想在表中使用的 json api http://www.mocky.io/v2/5e8da1cf310000bf90429a90 这是我想显示的图像
这是我尝试过的代码
export class Recommend extends Component {
constructor(props) {
super(props);
this.state = {
main: [],
engine: []
};
}
async componentDidMount(e) {
const res = await fetch(`https://www.mocky.io/v2/5e8d9b243100007a54429a4e`);
const main = await res.json();
this.setState({
main,
engine: main.engine
});
}
render() {
return (
<div className="engine ">
<table className="table ">
{this.state.engine.map(c => (
<tbody>
<tr>
<th>Name</th>
<td>{c.displacement}</td>
</tr>
</tbody>
))}
</table>
</div>
);
}
}
export default Recommend;
解决方案
编写以下 DataTable 组件
import React, {useEffect, useState} from "react";
import MUIDataTable from "mui-datatables";
import axios from 'axios';
function DataTable() {
const [posts, setPost] = useState([]);
const [isLoading, setIsLoading] = useState(false);
let signal = axios.CancelToken.source();
useEffect(() => {
setIsLoading(true);
let isSubscribed = true;
axios.get(`https://jsonplaceholder.typicode.com/posts`, {
cancelToken: signal.token,
})
.then(res => {
const posts = res.data;
setPost(posts);
setIsLoading(false);
}).catch(err => {
setIsLoading(false);
console.log(err);
});
return function cleanup() {
isSubscribed = false;
signal.cancel('Api is being canceled');
}
}, []);
const columns = ["id", "title", "body"];
const options = {
filterType: "dropdown",
responsive: "scroll"
};
return (
<MUIDataTable
title={"Posts"}
data={posts}
columns={columns}
options={options}
/>
);
}
export default DataTable;
并在 app.js 中使用 DataTable 组件
import React from "react";
import ReactDOM from 'react-dom';
import DataTable from "./DataTable";
class App extends React.Component {
render() {
return (
<DataTable/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
export default App;
推荐阅读
- postgresql - Azure ADF 数据复制 - 如果 oracle 列具有空值,则从 Oracle 复制到 Postgres 失败
- python - 添加范围以计算重叠python
- python - 遍历 CSV 泄漏内存
- reactjs - 如何登录 react 和 asp.net core?
- php - PHP 中的 JSON 到 .CSV
- laravel - Laravel 8 添加下载的字体并使用它们
- python - Material Design + Flask-wtf 表单值为 None 因为 mwc-textfield 有名称
- crystal-lang - 如何用水晶语言逐行读取文件?
- javascript - 数组中对象值的计数
- javascript - 是否可以在一次调用中访问多个产品变体信息?Shopify API 节点