时间戳

首页 > 解决方案 > React.js 数据表“表中没有可用数据”

javascript - React.js 数据表“表中没有可用数据”

问题描述

我尝试了将以下 jquery 代码插入代码的不同部分的所有选项，但它不起作用。该表显示没有数据。文件层次结构：index.js -> mainGrid.js -> Table.js 我不知道在哪里插入 jquery 及其正确操作的格式

jQuery代码

$(document).ready(function(){
  $("#newsblog").DataTable();
});

索引.html

<!DOCTYPE html>
<html lang="en">
  <link>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    <title></title>
    <link rel="stylesheet" type="text/css" href="datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css"/>
  </head>
  <body>
    <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
    <div id="root"></div>

    <script type="text/javascript" src="datatables.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("#newsblog").DataTable();
      });
    </script>

  </body>
</html>

表.js

import React, {useEffect, useState} from "react"
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios'
import List from './List'

export default function Table() {
    const baseUrl="xxxxxx"
    const [data, setData]=useState([])

    
    const requestGet=async()=>{
        await axios.get(baseUrl)
        .then(response=>{
            setData(response.data)
        }).catch(error=>{
            console.log(error)
        })
    }

    
    useEffect(()=>{
        requestGet()
    },[])

    return (
        <div className="Table">
            <div className="container-fluid">
                <div className="row mx-2 my-2">
                    <div className="col text-right">
                    </div>
                    <div className="col text-right"></div>
                    <div className="col text-right">
                         <List />
                    </div>
                </div>
                <div className="row mx-2 my-2">
                    <div className="col">
                        <table id="newsblog" className="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th scope="col" className="text-center align-middle">ID</th>
                                    <th scope="col" className="text-center align-middle">Ответственное лицо</th>
                                    <th scope="col" className="text-center align-middle">Кол-во загруженного материала, тонн</th>
                                    <th scope="col" className="text-center align-middle">Температура, Цельсия</th>
                                    <th scope="col" className="text-center align-middle">Время обработки, ч.</th>
                                    <th scope="col" className="text-center align-middle">Кол-во выгруженного материала, тонн</th>
                                    <th scope="col" className="text-center align-middle">Дата</th>
                                    <th scope="col" className="text-center align-middle">Номер печи</th>
                                </tr>
                            </thead>
                            <tbody>
                                {data.map(specs=>(
                                    <tr key={specs.id}>
                                        <td className="text-center align-middle p-1">{specs.id}</td>
                                        <td className="text-center align-middle p-1">{specs.resP_PERSON}</td>
                                        <td className="text-center align-middle p-1">{specs.loaD_MATERIALS}</td>
                                        <td className="text-center align-middle p-1">{specs.temperature}</td>
                                        <td className="text-center align-middle p-1">{specs.timing}</td>
                                        <td className="text-center align-middle p-1">{specs.unloaD_MATERIALS}</td>
                                        <td className="text-center align-middle p-1">{specs.reG_DATE}</td>
                                        <td className="text-center align-middle p-1">{specs.batterY_NUMB}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
}

标签： javascriptreactjs

解决方案

推荐阅读