React中useEffect未触发问题：仅当无关useState设为true时才执行

你遇到的核心问题大概率是组件条件渲染逻辑导致的：

如果父组件（或当前组件的return部分）存在类似 {isDataLoading && <WinesInMyCave />} 的判断，那当初始isDataLoading设为false时，这个组件根本不会被挂载，useEffect自然不会执行；而把初始值改成true时，组件满足渲染条件完成挂载，useEffect就触发了。

解决步骤： #

1. 检查渲染条件
   查看父组件或当前组件的return部分，确认是否有根据isDataLoading控制组件渲染的逻辑。如果有，要么调整渲染条件（比如不管loading状态都渲染组件，内部用loading状态控制内容显示），要么把isDataLoading的状态提到父组件管理，确保组件能正常挂载。

2. 修正组件内的逻辑
   即使组件挂载了，你的代码还有几个可以优化的点：

   • 异步函数里加错误捕获，避免请求失败导致setDataLoading(false)不执行，一直处于loading状态；
   • 初始winesList设为数组更合理，因为接口返回的是列表；
   • 用useEffect的清理函数，防止组件卸载后还执行状态更新（避免控制台警告）。

修改后的代码示例：

function WinesInMyCave() {
  const [winesList, setWinesList] = useState([]); // 初始设为数组更符合列表场景
  const [isDataLoading, setDataLoading] = useState(false);
  const [error, setError] = useState(null); // 新增错误状态，处理请求失败情况

  useEffect(() => {
    let isMounted = true; // 标记组件是否仍挂载，避免卸载后更新状态

    async function fetchWine() {
      console.log("Got this far 2");
      setDataLoading(true);
      setError(null);
      try {
        const response = await fetch("http://localhost:3000/api/wines", {
          method: "GET",
        });
        if (!response.ok) throw new Error("请求失败，请检查接口");
        const { winesList } = await response.json();
        if (isMounted) { // 组件挂载时才更新状态
          setWinesList(winesList);
        }
      } catch (err) {
        if (isMounted) {
          setError(err.message);
        }
      } finally {
        if (isMounted) {
          setDataLoading(false);
        }
      }
    }
    fetchWine();

    // 组件卸载时执行的清理函数
    return () => {
      isMounted = false;
    };
  }, []);

  console.log(winesList);
  console.log(isDataLoading);

  return (
    <div>
      {isDataLoading && <p>加载中...</p>}
      {error && <p className="error">错误：{error}</p>}
      {!isDataLoading && !error && (
        <ul>
          {winesList.map(wine => (
            <li key={wine.id}>{wine.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

3. 排除Strict Mode影响
   开发环境下React的Strict Mode会让useEffect执行两次（用于检测副作用），但不会导致完全不执行。如果生产环境表现不同，可以检查index.js里是否开启了<React.StrictMode>，不过这不是你当前问题的核心原因。

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