React Js 数据表“表中没有可用数据”

Question

我在使用 React Js 时遇到了问题。 我的数据表已成功填充，但第一行仍显示“表中没有可用数据” https://imgur.com/ApQPoO9

这是显示的html截图 https://imgur.com/Zk25ksS

另外，当我使用排序和搜索时，我的所有数据都将消失，只显示“表中没有可用数据”

网络结果：https://imgur.com/k5VqJIB 我的代码显示来自数据库的数据

class Uptime extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            data: []
        }
    }

    componentDidMount() {
        fetch('/uptime')
            .then(res => res.json())
            // .then(res => res.text())          // convert to plain text
            // .then(text => console.log(text))
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        data: result.data
                    })
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    })
                }
            )
    }

    render() {
        const {error, isLoaded, data} = this.state;
        // if (error) {
        //     return <div>Error: {error.message}</div>;
        // } else if (!isLoaded) {
        //     return (
        //         <div className="spinner-border text-primary" role="status">
        //             <span className="sr-only">Loading...</span>
        //         </div>
        //     )
        // } else {    WHEN I ADD THIS CODE, THE SEARCH FUNCTION AND SORT FUNCtION IS GONE , SO I JUST REMOVE IT
        return (
            <div id="content-wrapper" className="d-flex flex-column">
                <div id="content">
                    <div className="container-fluid">
                        <div className="card shadow mb-4 mt-5">
                            <div className="card-header py-3 text-center">
                                <h6 className="m-0 font-weight-bold text-primary">DataTables Example</h6>
                            </div>
                            <div className="card-body">
                                <div className="table-responsive">
                                    <table className="table table-bordered" id="dataTable" width="100%"
                                           cellSpacing="0">

                                        <thead>
                                        <tr>
                                            <th width="10%">Name</th>
                                            <th width="40%">Url</th>
                                            <th width="10%">Downtime</th>
                                            <th width="20%">date</th>
                                            <th width="10%">Status Code</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                          {data.map(item => (
                                                        <tr key={item[0]}>
                                                        <td>{item[1]}</td>
                                                        <td>{item[2]}</td>
                                                        <td>{item[5]}</td>
                                                        <td>{item[4]}</td>
                                                        <td>{item[3]}</td>
                                                        </tr>
                                                      ))}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <footer className="sticky-footer bg-white">
                    <div className="container my-auto">
                        <div className="copyright text-center my-auto">
                            <span>Copyright &copy; Your Website 2019</span>
                        </div>
                    </div>
                </footer>

            </div>

        )

    }
}

Answer 1

问题：

数据表在数据到来之前被初始化，所以它会显示 “表中没有可用数据”，一旦表被初始化然后之后 您正在对该表进行更改，因此您的数据会在之后追加 “表中没有可用数据”行，您可以通过以下方式检查该问题 在 sn-p 下运行。

const { useState , useEffect } = React;

const App = () => {

  const [users,setUsers] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setUsers([[0,"Vivek"],[1,"Darshita"]]);
    },2000);
  },[]);

  return (
    <table className="table table-bordered" id="dataTable" width="100%" cellSpacing="0">
    <thead>
        <tr>
            <th width="10%">Name</th>
        </tr>
    </thead>
    <tbody>
        {
            users.map(item => (
                    <tr key={item[0]}>
                        <td>{item[1]}</td>
                    </tr>))
        }
    </tbody>
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

$(document).ready(function() {
    $('#dataTable').DataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="react-root"></div>

解决方案：

datatable 正在自动初始化，你必须销毁 它在设置状态之前，并在数据完成后重新初始化它 可用，正如您在下面的 sn-p 中看到的一样

const { useState , useEffect } = React;

const App = () => {

  const [users,setUsers] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      $('#dataTable').DataTable().destroy();
      setUsers([[0,"Vivek"],[1,"Darshita"]]);
    },2000);
  },[]);

  useEffect(() => {
      $('#dataTable').DataTable();
  },[users]);

  return (
    <table className="table table-bordered" id="dataTable" width="100%" cellSpacing="0">
    <thead>
        <tr>
            <th width="10%">Name</th>
        </tr>
    </thead>
    <tbody>
        {
            users.map(item => (
                    <tr key={item[0]}>
                        <td>{item[1]}</td>
                    </tr>))
        }
    </tbody>
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

$(document).ready(function() {
    $('#dataTable').DataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="react-root"></div>