作為 onClick 屬性傳遞的函數僅傳遞一次

Question

我正在構建一個應用程序，使用戶能夠查看電影信息來學習 React。 我有一個名為BoxOffice的組件，它有幾個useState 。 useState是const [movieDetailPage, setMovieDetailPage] 。
我將setMovieDetailPage作為組件Movie的屬性onClick傳遞

在組件Movie中，我將setMovieDetailPage指定為div的onClick事件。 當我第一次點擊div時，它會返回默認值 0。 但是當我第二次點擊它時，它沒有返回任何東西。

這是我的代碼：
BoxOffice.js

import { useEffect, useState } from 'react'

import Movie from '../Movie/Movie'
import BoxOfficeButton from '../BoxOfficeButton/BoxOfficeButton'

import styles from './BoxOfficeStyles'



let data;
function BoxOffice(props) {
  const [containerValue, setContainerValue] = useState(5)
  const [containerValueLimit, setContainerValueLimit] = useState(0)
  const [movieDetailPage, setMovieDetailPage] = useState(0)

  try {
    data = Array.from(JSON.parse(props.data))
    data = data.map(JSON.parse)

    return (
      <>       
        <div style={styles}>
          <BoxOfficeButton value={containerValue} valueLimit={data.length} type='left'/>
          {data.slice(containerValue-5, containerValue).map((movieInfo) => <Movie info={movieInfo} onClick={setMovieDetailPage} />)}
          <BoxOfficeButton value={containerValue} valueLimit={data.length} type='right'/> 
        </div>       
      </>
    )
  }
  catch {
    return <div style={styles}></div>
  }
}

export default BoxOffice

電影.js

import styles from './MovieStyles'

function Movie(props) {
  function handleClick() {
    const setMovieDetailPage = props.onClick

    setMovieDetailPage((prev) => {
      if (prev == 0) {
        console.log(prev)
      }
    })
  }

  try {
    return (
      <div style={styles} onClick={() => handleClick()}>
        <div>{props.info.title}</div>
      </div>
    )
  }
  catch {
    return (
      <div style={styles}></div>
    )
  }
}

export default Movie

為什么它只工作一次？ 這里可能的問題是什么？

Answer 1

在您在這里使用的 setter 函數中：

function handleClick() {
    const setMovieDetailPage = props.onClick

    setMovieDetailPage((prev) => {
      if (prev == 0) {
        console.log(prev)
      }
    })
  }

您沒有在 setter 函數中返回任何內容。 這意味着在第一次單擊時，您將 movieDetailPage 狀態的值設置為未定義。 因此，為什么在下一次單擊時不再滿足條件 prev == 0，因此不執行 console.log()。

要解決此問題，只需在函數內返回一個值

function handleClick() {
    const setMovieDetailPage = props.onClick

    setMovieDetailPage((prev) => {
      if (prev == 0) {
        console.log(prev)
      }
     return // return something here
    })
  }