如何在React useEffect中使用组件函数外的导入变量？

问题根源：ES模块的导入在React看来是静态不可变的，所以当你把likedImages放进依赖数组时，ESLint会认为它不会变化，抛出不必要依赖的警告；但实际上你可能在Cat.js里直接修改了这个变量（比如给数组push元素），这种修改React无法追踪，所以不加依赖的话useEffect不会触发。

最佳解决方案：改用React状态管理传递数据 #

如果likedImages是会动态变化的内容，别用导出普通变量的方式，应该用React的状态机制传递：

• 状态提升：把likedImages的状态放到共同的父组件里，通过props传递给LikeScreen，这样React能追踪props变化，useEffect可以正常监听props里的值。
• Context API：如果组件层级深，用Context包裹状态，LikeScreen从Context中读取，配合useContext，这样状态变化时组件会自动更新，也不需要额外的useEffect。
• 状态管理库：比如Redux、Zustand，适合大型项目的全局状态管理。

举个状态提升的例子：
父组件维护状态：

// ParentComponent.js
import React, { useState } from 'react';
import LikeScreen from './LikeScreen';
import Cat from './Cat';

const ParentComponent = () => {
  const [likedImages, setLikedImages] = useState([]);
  
  // 把setLikedImages传给Cat组件，让它更新状态
  return (
    <>
      <Cat setLikedImages={setLikedImages} />
      <LikeScreen likedImages={likedImages} />
    </>
  );
};

LikeScreen组件接收props：

// LikeScreen.js
import React, { useState, useEffect } from 'react';

const LikeScreen = ({ likedImages }) => {
  const [liked, setLiked] = useState([]);

  useEffect(() => {
    setLiked(likedImages);
  }, [likedImages]); // 依赖props，ESLint无警告，状态变化会触发

  console.log('Liked:', liked);
  
  return (
    <>
      <h1>Liked Page</h1>
    </>
  );
};

export default LikeScreen;

临时应急方案（不推荐长期使用） #

如果暂时没法修改状态管理方式，可以用useRef追踪变量变化，手动对比更新：

import React, { useState, useEffect, useRef } from 'react';
import { likedImages } from './Cat.js';

const LikeScreen = () => {
  const [liked, setLiked] = useState([]);
  const prevLikedImagesRef = useRef();

  useEffect(() => {
    // 对比当前和上一次的likedImages，复杂结构建议用深对比工具（如lodash.isEqual）
    if (JSON.stringify(likedImages) !== JSON.stringify(prevLikedImagesRef.current)) {
      setLiked(likedImages);
      prevLikedImagesRef.current = likedImages;
    }
  }, []); // 依赖数组为空，避免警告

  console.log('Liked:', liked);
  
  return (
    <>
      <h1>Liked Page</h1>
    </>
  );
};

export default LikeScreen;

注意：JSON.stringify对比性能较差，且对函数、undefined等特殊值处理有问题，复杂结构推荐用专门的深对比方法。

不推荐的方案：直接禁用警告 #

可以在useEffect上方加注释禁用ESLint警告，但这会掩盖潜在的依赖问题，仅作为临时权宜之计：

useEffect(() => {
  setLiked(likedImages);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [likedImages]);

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