如何在比较表中显示 json api 数据？答案

【问题标题】：How to display json api data in compare table?如何在比较表中显示 json api 数据？
【发布时间】：2020-04-08 10:07:48
【问题描述】：

我是 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;

【问题讨论】：

发布你的完整代码，这样更容易理解你想要做什么。
将和的东西移到 map 方法之外，就在标记之后。使用 map 方法只对 json 进行迭代，

我添加了完整代码@Tarreq

您的代码逻辑有效，这是一个有效的代码示例，您到底想要什么？！示例工作代码：codesandbox.io/s/…

标签： javascript reactjs html-table compare

【解决方案1】：

编写如下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;

【讨论】：