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

【问题标题】：Fetching data and conditional rendering with React useEffect使用 React useEffect 获取数据和条件渲染
【发布时间】：2021-03-16 17:39:32
【问题描述】：

我正在构建一个 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 时，没有课程消息总是出现几毫秒，然后被数据替换。 p>

我该如何解决这个问题？谢谢你们的帮助！

【问题讨论】：

标签： javascript reactjs api axios use-effect

【解决方案1】：

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

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;

【讨论】：

谢谢！那我使用 useEffect 的方式没有问题吗？
我不这么认为。在useEffect 中使用async 函数很容易出错，但您在此处处理此问题的方式是正确的。我觉得不错！
你做的一切都是正确的。但是，由于您是异步获取数据的，因此在返回之前有一小段时间。在我看来，上面的答案是处理这些情况的最佳方法。虽然，我会使用三元运算符返回而不是返回两次。（但这完全取决于您的喜好）。
非常感谢大家抽出宝贵时间回答我的问题！它解决了我的问题。