React 在每次点击时都会清空数组

Question

创建一个 React 应用程序，用户从 5 个选项中选择 2 部电影，如果电影相同，则返回成功。我尝试存储在状态中所做的选择，然后比较它们，它正确返回成功，但是当在第一部电影之后单击第二部电影时，它说选择数组再次为空。

因此，如果我单击 movie1，然后单击 movie2，然后再次单击 movie1，它将显示成功，就好像将单击的每个电影存储在其自己的单独数组中一样

我尝试了很多变体，但这是我的通用代码：

const [userChoices, setUserChoices] = useState([]);


useEffect(() => {
    if (userChoices.length === 2) {
        console.log(userChoices)

        if (userChoices[0] === userChoices[1]) {
            console.log('W');
        } else {
            console.log('L');
        }
    }
}, [userChoices]);


const handleObjectSelect = (selectedObject) => {
    // Checks if movie choices were a match
    setUserChoices((prevChoices) => {
        const updatedChoices = [...prevChoices, selectedObject];
    });

    
};

return <div className="content-card" onClick={() => handleObjectSelect(movie?.title)}>
    <img className="movie-poster img-fluid" src={`${img500x500}/${movie?.poster_path}`} />
    <div className="movie-title">{movie?.title}</div>
    <div className="movie-info">
        <span>{movie?.release_date}</span>
        <span><FontAwesomeIcon icon={faStar} />{movie?.vote_average}</span>
    </div>
</div>;

我还尝试将选择存储在常规数组和常规变量中，但同样的问题仍然存在，我是新来反应的，希望得到任何帮助，谢谢！

Answer 1

设置时应该返回该值：

const handleObjectSelect = (selectedObject) => {
 // Checks if movie choices were a match
 setUserChoices((prevChoices) => {
    const updatedChoices = [...prevChoices, selectedObject];
    return updatedChoices; //This line should be added.
 });
};

Answer 2

你几乎已经拥有它了！ 您忘记在函数中返回状态。

setUserChoices((prevChoices) => {
        const updatedChoices = [...prevChoices, selectedObject];
        return updatedChoices;