React useEffect接收依赖未知函数eslint警告如何修复

• 代码存在基础Hook笔误：searchValue状态声明错误将useState写为useEffect，会直接导致状态逻辑完全失效。
• ESLint规则触发的核心逻辑：组件每次重渲染都会重新创建作用域内的普通函数getMovieRequest，在useEffect内调用这类外部定义的普通函数时，ESLint静态检查无法穿透函数边界追踪其内部引用的所有响应式变量，无法确认依赖数组是否完整，因此抛出依赖项未知的提示。
• 额外隐藏风险：如果直接将getMovieRequest加入useEffect依赖数组，由于每次渲染函数引用都会变化，会导致effect无限触发，页面陷入重渲染死循环。

优先按照ESLint提示将请求逻辑改为useEffect内联函数，同时修正笔误的Hook，修复后代码无警告、逻辑正常：

import { useState, useEffect } from 'react';

function MoviePage() {
  const [movies, setMovies] = useState([]);
  // 修正笔误：将错误的useEffect改为useState，统一setter命名为小驼峰规范
  const [searchValue, setSearchValue] = useState('');

  useEffect(() => {
    // 异步请求逻辑内联在effect中
    const fetchMovieData = async () => {
      const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=d03f9066`;
      const response = await fetch(url);
      const responseJson = await response.json();
      if (responseJson.Search) {
        setMovies(responseJson.Search);
      }
    };

    fetchMovieData();
    // 依赖数组仅需保留searchValue，ESLint可完整识别所有依赖，不会抛出警告
  }, [searchValue]);

  // 页面渲染逻辑
  return (
    <div className="movie-container">
      <input
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        placeholder="搜索电影"
      />
      {/* 电影列表渲染代码 */}
    </div>
  );
}

export default MoviePage;

如果请求逻辑需要在组件多处复用、无法写在effect内部，可以使用useCallback包裹请求函数固定引用，显式声明依赖后再传入effect：

// 用useCallback包裹请求函数，显式声明依赖
const getMovieRequest = useCallback(async () => {
  const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=d03f9066`;
  const response = await fetch(url);
  const responseJson = await response.json();
  if (responseJson.Search) {
    setMovies(responseJson.Search);
  }
}, [searchValue]);

useEffect(() => {
  getMovieRequest();
}, [getMovieRequest]);

这种写法同样可以消除ESLint警告，也不会出现无限重渲染的问题。

内容的提问来源于stack exchange，提问作者K'man Amuda Jr.