具有空依赖数组的 useEffect 无限循环

Question

在未使用 extraReducer isLoading 状态的情况下正确运行的代码 SearchForm 组件未完全编写，只是理解问题所需要的

const fetchMovies = createAsyncThunk(
  'movies/fetchMovies',
  async (movieTitle) => {
    const newMovies = await searchApi.findMovie(movieTitle)
    return newMovies
  }
)

extraReducers: (builder) => {
    builder
      .addCase(fetchMovies.pending, (state, action) => {
        state.isLoading = true
      })
      .addCase(fetchMovies.fulfilled, (state, action) => {
        state.isLoading = false // running an infinite loop
        }
      })


import { fetchMovies } from '../../redux/slices.js/moviesSlice'
export function SearchForm() {
  const dispatch = useDispatch()

  // movies default value
  useEffect( () => {
    dispatch(fetchMovies('Titanic'))
  }, [])
  

  return (
    <form>
      <input></input>
      <button></button>
    </form>
  )
}

Answer 1

您的代码仍然很不完整。 我不知道你为什么使用useEffect来获取电影。 由于您的SearchForm组件的布局方式，我猜想用户搜索电影标题，提交，然后根据标题获取电影的动作被调度。

所以在那种情况下，使用useEffect是不合适的，你必须使用一个函数来处理提交。

import { useState } from "React"

const SearchForm = () => {

const [input, setInput] = useState("");

const handleSubmit = (e) => {
  e.preventDefault();
  if (!input) return;

  dispatch(fetchMovies(input));
}

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={(e) => setInput(e.target.value)}></input>
      <button type="submit">Search</button>
    </form>
  )
}

Answer 2

事实证明，因为我试图有条件地渲染如下：

export default function HomePage() {
  return(
    {isLoading 
    ? <Preloader />
    : <Routing />
    }
  )
}

因为我猜以这种方式渲染是不正确的