为什么当我从api得到一个空值响应时不调用useEffect ?

Question

我想做的是从后端获取数据。我用的是axios.get()。我创建了一个没有依赖项的useEffect，因为我想每次都调用它。useEffect工作，但是当我得到一个空值作为响应时，它停止了，如果我添加一个新值(来自postman)来测试列表是否会更新，但它不会。只有当我刷新屏幕时，它才会开始每秒获取数据列表。

  useEffect(() => {
    console.log('called');
    axios
      .get(`API`)
      .then((response) => {
        setDataList(response.data.data); //null or data
      })
      .catch((error) => console.log('error', error));
  });

如何使useEffect工作，即使我得到一个空值从响应?

Answer 1

如果不使用依赖数组，您将获得与一开始就不使用useEffect相同的效果。

每次组件呈现时，都会触发Ajax请求。

你的问题是，在其他条件相同的情况下，只有当setDataList(response.data.data)设置了不同的值时，它才会重新渲染。.

如果错误，则没有设置任何值，这样就不会触发重新渲染。

---

您需要决定您真正想要触发新请求的内容。例如，定时器。

(未测试的代码);

useEffect(() => {
    let timeOut = null;
    let controller = null;
    const makeRequest = async () => {
        controller = new AbortController();
        const response = await axios.get(`API`, {
            signal: controller.signal
        });
        const data = response.data?.data;
        if (data) setDataList(data);
        setTimeout(makeRequest, 5000); // Wait 5 seconds then poll again
    };
    makeRequest(); // Start the timer.
    // Clean up on unmount
    return () => {
        clearTimeout(timeOut);
        controller.abort();
    };
}, [ /* You need a dependency array to stop multiple timers being created! */ ]);