具有空依賴數組的 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 />
    }
  )
}

因為我猜以這種方式渲染是不正確的