Как отобразить данные json API в таблице сравнения? - PullRequest
Новая
       10

Как отобразить данные json API в таблице сравнения?

0 голосов
/ 08 апреля 2020

Я новичок в реакции js, и у меня есть json данные, и я хочу отобразить этот json API в таблице сравнения на изображении, но я не знаю, как это сделать, я пытался здесь json API, который я хочу использовать в таблице http://www.mocky.io/v2/5e8da1cf310000bf90429a90, и вот изображение, которое я хочу отобразить enter image description here

вот мой код, который я пробовал 

    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;

1 Ответ

0 голосов
/ 09 апреля 2020

Запишите следующий компонент 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;

и используйте компонент DataTable в приложении. js

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;
...