时间戳

首页 > 解决方案 > 如何解决数据表反应js中的表中没有可用数据的问题

reactjs - 如何解决数据表反应js中的表中没有可用数据的问题

问题描述

我是 react js 的新手，我想将数据库中的所有数据显示到数据表中，但我收到表中没有可用数据的错误。我还将 getStudent 添加到 useEffect 以便它可以连续运行

这是我的 useState 和 useEffect 代码段：

const [student, setStudent] = useState([]);

const getStudent = async () => {
  try {
    const response = await fetch("http://localhost:5000/admin/get_allstudent");
    const data = await response.json();
    setStudent(data);
  } catch (err) {
    console.error(err.message);
  }
};

const dataTable = () => {
  $(document).ready(function () {
    $("#example").DataTable();
  });
};

useEffect(() => {
  setInterval(dataTable, 1000);
  getStudent();
}, []);

这是我的渲染：

<table id="example" className="display ">
  <thead>
    <tr>
      <th>Name</th>
      <th>Username</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {student.map((item, index) => {
    return (
    <tr key={item.stu_id}>
      <td>{item.stu_name}</td>
      <td>{item.stu_username}</td>
      <td>
        <Edit item={item} />
        <button className="btn btn-danger" onClick={()=> deleteStudent(item.stu_id)}
          >
          Delete
        </button>
      </td>
    </tr>
    );
    })}
  </tbody>
</table>;

这是输出

标签： reactjsdatatable

解决方案

我不知道您的代码中的 jQuery 部分，我认为这没有必要

首先尝试删除该部分，然后检查学生是否有价值

您可以使用 useEffect检查学生值

useEffect(() => {
 if (student) console.log('data is ok ' , student)
}, [student]);

如果消息出现在控制台中并且它不是空的，那么应该没有问题

推荐阅读