Javascript 使用React useEffect获取数据和条件呈现

我正在构建一个MERN stack应用程序，它获取有关大学课程的数据并将其呈现在一个表中。

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;

import React，{useState，useffect}来自“React”；
从“react materialize”导入{Table}；
从“axios”导入axios；
常数courstestable=（）=>{
const[courses，setCourses]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const coursesData=等待axios.get（'http://localhost:8001/')
设置课程（coursesData.data）
}
fetchData（）
}, [])
返回(
名称
教授。
代码
{
课程长度>=1
？courses.map（courses=>
{课程名称}
{当然，教授}
{course.code}
)
: 
没有办法
}
);
}
出口不稳定；

我使用条件渲染，这样，如果

课程

为空，则会显示一条类似“没有课程”的消息。当数组已满时，数据将呈现在表行中

我的问题是：当

courses

已满并且呈现

CoursesTable.js

时，在被数据替换之前，始终会出现几毫秒内没有课程的消息

---

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

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

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;

import React，{useState，useffect}来自“React”；
从“react materialize”导入{Table}；
从“axios”导入axios；
常数courstestable=（）=>{
const[courses，setCourses]=useState（[]）；
const[isLoading，setLoading]=useState（true）；
useffect（（）=>{
const fetchData=async（）=>{
const coursesData=等待axios.get（'http://localhost:8001/')
设置课程（coursesData.data）
设置加载（假）；
}
fetchData（）
}, [])
if（isLoading）{返回加载…}；
返回(
名称
教授。
代码
{
课程长度>=1
？courses.map（courses=>
{课程名称}
{当然，教授}
{course.code}
)
: 
没有办法
}
);
}
出口不稳定；

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

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;

import React，{useState，useffect}来自“React”；
从“react materialize”导入{Table}；
从“axios”导入axios；
常数courstestable=（）=>{
const[courses，setCourses]=useState（[]）；
const[isLoading，setLoading]=useState（true）；
useffect（（）=>{
const fetchData=async（）=>{
const coursesData=等待axios.get（'http://localhost:8001/')
设置课程（coursesData.data）
设置加载（假）；
}
fetchData（）
}, [])
if（isLoading）{返回加载…}；
返回(
名称
教授。
代码
{
课程长度>=1
？courses.map（courses=>
{课程名称}
{当然，教授}
{course.code}
)
: 
没有办法
}
);
}
出口不稳定；

谢谢！我使用useEffect的方式没有问题吧？我不这么认为。在

useffect

中使用

async

函数是一个常见的错误，但是您在这里处理这个问题的方法是正确的。看起来不错！你做的每件事都是正确的。但是，由于异步获取数据，因此在数据返回之前有一个很小的时间窗口。在我看来，以上的答案是处理这些情况的最佳方法。不过，我会使用三元运算符返回，而不是执行两次返回。（但这完全取决于你的喜好）。非常感谢你抽出时间回答我的问题，伙计们！它解决了我的问题。谢谢！我使用useEffect的方式没有问题吧？我不这么认为。在

useffect

中使用

async

函数是一个常见的错误，但是您在这里处理这个问题的方法是正确的。看起来不错！你做的每件事都是正确的。但是，由于异步获取数据，因此在数据返回之前有一个很小的时间窗口。在我看来，以上的答案是处理这些情况的最佳方法。不过，我会使用三元运算符返回，而不是执行两次返回。（但这完全取决于你的喜好）。非常感谢你抽出时间回答我的问题，伙计们！它解决了我的问题。