作为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

Movie.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
})
}