Question

我正在使用React useEffect挂钩获取数据并显示加载指示器，但是我的加载无法正常工作。

在这里使用useEffect Hook代码：

useEffect(() => {
  fetchEvents();
}, []);

fetchEvents功能代码：

const fetchEvents = () => {
    setLoading(true);
    const requestBody = {
      query: `
          query {
            events {
              _id
              title
              description
              price
              date
              creator {
                _id
                email
              }
            }
          }
        `
    };

    fetch("http://localhost:5000/graphql", {
      headers: {
        "Content-Type": "application/json"
      },
      method: "POST",
      body: JSON.stringify(requestBody)
    })
      .then(res => {
        if (res.status !== 200 && res.status !== 201) {
          throw new Error("Failed");
        }
        return res.json();
      })
      .then(resData => {
        const events = resData.data.events;
        setEvents(events);
        setLoading(false);
      })
      .catch(err => {
        console.log(err);
        setLoading(false);
      });
  };`

Answer 1

useEffect的第一个参数（函数）仅在第二个参数（列表）的一个对象被修改时才被调用。如果列表为空，则永远不会发生。

您可以删除第二个参数以在每次更新时应用功能fetchEvents，也可以使用任何常量仅运行一次fetchEvents。

Answer 2

您应该提供更多信息，但在这里为您提供示例：

import React, { useState, useEffect } from 'react';
import { Spinner } from 'react-bootstrap';

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    fetch('/data/endpoint')
      .then((res) => res.json)
      .then((response) => {
        setData([...response]);
        setIsLoading(false);
      });
  }, []);

  return isLoading ? (
    <Spinner />
  ) : (
    <ol>
      data.map(items => <li>{items.label}</li>);
    </ol>
  );
};

使用react useEffect挂钩

2 个答案: