使用 React useEffect 获取数据和条件渲染

jk777 发表于 Dev

jk777

我正在构建一个 MERN 堆栈应用程序，该应用程序获取有关大学课程的数据并将其呈现在表格中。该CoursesTable.js组件如下所示：

import React, { useState, useEffect  } from 'react';
import { Table } from 'react-materialize';
import axios from 'axios';

const CoursesTable = () => {

  const [courses, setCourses] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const coursesData = await axios.get('http://localhost:8001/')
      setCourses(coursesData.data)
    }
    fetchData()
  }, [])

  return (
    <Table>
      <thead>
        <tr>
          <th data-field="course-name">
            Name
          </th>
          <th data-field="course-prof">
            Prof.
          </th>
          <th data-field="course-code">
            Code
          </th>
        </tr>
      </thead>
      <tbody>
        {
          courses.length >= 1
          ? courses.map(course => 
              <tr key={course._id}>
                <td>
                  {course.name}
                </td>
                <td>
                  {course.prof}
                </td>
                <td>
                  {course.code}
                </td>
              </tr>
            )
          : <tr>
              <td>There is no course</td>
            </tr>
        }
      </tbody>
    </Table>
  );
}

export default CoursesTable;

我使用条件渲染，因此如果courses为空，则会显示一条消息，如没有课程。当数组已满时，数据将呈现在表行中。

我的问题是：当courses已满并CoursesTable.js呈现时，在被数据替换之前，没有课程消息总是出现几毫秒。

我怎样才能解决这个问题？谢谢你们的帮助！

R·科利施

您可以进行条件检查，例如：

import React, { useState, useEffect  } from 'react';
import { Table } from 'react-materialize';
import axios from 'axios';

const CoursesTable = () => {

  const [courses, setCourses] = useState([]);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const coursesData = await axios.get('http://localhost:8001/')
      setCourses(coursesData.data)
      setLoading(false);
    }
    fetchData()
  }, [])
  if(isLoading) { return <div> Loading ... </div> };
  return (
    <Table>
      <thead>
        <tr>
          <th data-field="course-name">
            Name
          </th>
          <th data-field="course-prof">
            Prof.
          </th>
          <th data-field="course-code">
            Code
          </th>
        </tr>
      </thead>
      <tbody>
        {
          courses.length >= 1
          ? courses.map(course => 
              <tr key={course._id}>
                <td>
                  {course.name}
                </td>
                <td>
                  {course.prof}
                </td>
                <td>
                  {course.code}
                </td>
              </tr>
            )
          : <tr>
              <td>There is no course</td>
            </tr>
        }
      </tbody>
    </Table>
  );
}

export default CoursesTable;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。