Question

我有一个小的Web应用程序，它使用axios从API中获取一些订单。我的问题是新订单仅在刷新页面时出现，它们不会自动更新。

这是我的useEffect挂钩：

useEffect(() => {
    setLoading(true);
    apiClient
      .getEvents()
      .then((res) => {
        console.log(res);
        setOrders(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

这是我使用axios的地方：

import axios from "axios";

const username = "user";
const password = "pass";

const token = Buffer.from(`${username}:${password}`, "utf8").toString("base64");

const apiClient = axios.create({
  baseURL: "API URL",
  withCredentials: false,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    Authorization: `Basic ${token}`,
  },
});

export default {
  getEvents() {
    return apiClient.get("/orders");
  },
  getEvent(order_id) {
    return apiClient.get("/orders/" + order_id);
  },
};

Answer 1

您的问题来自useEffect-Hook本身。

useEffect(() => {
    setLoading(true);
    apiClient
      .getEvents()
      .then((res) => {
        console.log(res);
        setOrders(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

您在此处传递一个空数组作为第二个参数：}, []);。 当您将空数组作为第二个参数传递给useEffect时，它将仅在第一次安装时运行，然后不再运行。

您可以在此参数中传递不同的变量。在这种情况下，useEffect将在这些变量中的值更改时运行。因此，例如，您可以使用“刷新”按钮来更改状态为refresh的状态，然后将其作为第二个参数传递给useEffect。

const [refresh, setRefresh] = useState(false);

useEffect(() => {
    if(!refresh) return;
    setLoading(true);
    apiClient
      .getEvents()
      .then((res) => {
        console.log(res);
        setOrders(res.data);
        setLoading(false);
        setRefresh(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [refresh]);

只是一个简单的例子，当然可以做得更好。

还有一个提示：您可以省略第二个参数，即useEffect的依赖项数组，这将使其在组件的每次更新中运行。 不要这样做。在大多数情况下，您将陷入无限循环，因为在大多数情况下，您将更新状态并使组件在useEffect中重新呈现-情况下，使用setLoading()就足够了。

数据未使用React Hook useEffect（）更新

1 个答案: