Javascript React.js数据表“；表”中没有可用数据；_Javascript_Reactjs

Javascript React.js数据表“；表”中没有可用数据；

javascript reactjs

Javascript React.js数据表“；表”中没有可用数据；,javascript,reactjs,Javascript,Reactjs,我尝试了将以下jquery代码插入代码的不同部分的所有选项，但都不起作用。该表显示时没有数据。文件层次结构：index.js->mainGrid.js->Table.js 我不知道在哪里插入jquery及其格式以进行正确的操作 Jquery代码 $(document).ready(function(){ $("#newsblog").DataTable(); }); index.html <!DOCTYPE html> <html lang=&qu

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

Jquery代码

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

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


$（文档）.ready（函数（）{
$（“#新闻博客”）.DataTable（）；
});

Table.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>
    );
}

import React，{useffect，useState}来自“React”
导入“bootstrap/dist/css/bootstrap.min.css”
从“axios”导入axios
从“./List”导入列表
导出默认函数表（）{
const baseUrl=“xxxxxx”
const[data，setData]=useState（[]）
const requestGet=async（）=>{
等待axios.get（baseUrl）
。然后（响应=>{
setData（response.data）
}).catch（错误=>{
console.log（错误）
})
}
useffect（（）=>{
requestGet（）
},[])
返回(
身份证件
Ответственное лицо
Кол-во загруженного материала, тонн
Температура, Цельсия
Время обработки, ч.
Кол-во выгруженного материала, тонн
Дата
Номер печи
{data.map（规格=>(
{specs.id}
{规格对应人员}
{规格装载材料}
{规格温度}
{规格计时}
{specs.unloaD_MATERIALS}
{规格注册日期}
{电池规格_NUMB}
))}
);
}

混合React和jQuery是一个众所周知的坏主意。可能发生的情况是React代码将重新呈现部分DOM，而jQuery代码将不会引用新元素。为什么不使用众多React表呈现插件/组件中的一个呢？您正在寻找？另外，我完全同意上面的评论。我完全同意@David，但这是我找到的最快的方法。我是一个完全的新手，我不知道该做什么。根本没有时间进行更改，只有一个用于jquery的脚本和一个用于datatable的脚本。另外，您应该将

jquery.min.js

放在

datatable.min.js

@Pipi之前：“根本没有时间进行更改”-如果您选择一个框架并按设计使用它，而不是试图混合和匹配两个根本不同的框架中的片段，您会发现开发进行得更快。你越是新手，你就越会在这个问题上转动你的轮子而一事无成。您当然可以从开始尝试，但尝试混合使用这些框架会带来灾难。