API返回null值时useEffect为何停止触发？如何解决？

你的问题根源在于：当API返回null时，执行setDataList(null)如果当前dataList已经是null，React会判定状态没有发生变化，不会触发组件重新渲染。而无依赖项的useEffect仅会在组件渲染完成后执行，因此后续就不再触发API请求了。

方案1：定时器轮询（推荐） #

如果你的需求是持续定时获取数据，最合理的方式是使用setInterval实现轮询，避免依赖组件渲染触发请求：

useEffect(() => {
  // 每隔1秒发起一次请求（可根据需求调整间隔时间）
  const pollInterval = setInterval(() => {
    console.log('called');
    axios
      .get(`API`)
      .then((response) => {
        setDataList(response.data.data);
      })
      .catch((error) => console.log('error', error));
  }, 1000);

  // 组件卸载时清理定时器，防止内存泄漏
  return () => clearInterval(pollInterval);
}, []); // 空依赖数组确保仅在组件挂载时初始化一次定时器

方案2：强制触发状态更新（不推荐） #

如果必须依赖组件渲染触发请求，可以通过确保每次setDataList都生成新的状态引用，强制React触发重新渲染。比如将数据包裹在对象中：

useEffect(() => {
  console.log('called');
  axios
    .get(`API`)
    .then((response) => {
      // 用对象包裹数据，每次生成新引用，强制触发状态更新
      setDataList({ payload: response.data.data });
    })
    .catch((error) => console.log('error', error));
});

使用数据时需访问dataList.payload，但这种方式会导致组件频繁无意义渲染，影响性能，仅在特殊场景下使用。

内容的提问来源于stack exchange，提问作者bill2