useState 不起作用。 useEffect 一直显示[]

Question

我使用 React，我想在数组中添加电影标题，但我无法做到这一点并在 UI 中显示。请帮我。我看了一个类似的问题，我认为我的问题没有答案。警惕工作是对的。但 useEffect 始终显示空数组。请观看我的代码并写下答案:)

import {useEffect, useState} from 'react';

import {OneFilm} from "./OneFilm";
import {Link} from 'react-router-dom';
import {Film} from "../../interfaces";
import styles from '../../css/AllFilms.module.css';


export function AllFilms() {
    const [allFilms, setAllFilms] = useState<Film[]>([]);
    const [selectedFilms, setSelectedFilms] = useState<string[]>([])

    const fetchFilms = async () => {
        try {
            const response = await fetch(`URL`, {
                headers: {
                    'X-API-KEY': process.env.REACT_APP_TOKEN
                }
            });
            const dataResp = await response.json();
            setAllFilms(dataResp);
        } catch (error) {
            console.error('Ошибка при получении фильмов:', error);
        }
    };

    const selectFilm = (filmTitle: string) => {
        alert(filmTitle)
        setSelectedFilms(prev => [...prev, filmTitle])
    }

    useEffect(() => {
        fetchFilms()
    }, [])

    useEffect(() => {
        console.log(selectedFilms)
    }, [selectedFilms])

    return (
        <div className={styles.container}>
            <ul className={styles.films}>
                {
                    allFilms.map((film) => (
                            <Link to={`/id=${film.id}`} key={film.id} onClick={() => selectFilm(film.name)}>
                                <OneFilm film={film}/>
                            </Link>
                        )
                    )}
            </ul>

            <div className="selected__films">
                <ul>
                    {selectedFilms.map((film) => (
                        <li>{film}</li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

也许它不起作用，因为我重定向到另一个页面？

Answer 1

当组件不再渲染时，您的组件 (

AllFilms

) 状态就会丢失。来自文档：

React 在渲染期间保留组件的状态 位于 UI 树中的位置。如果它被删除，或者有不同的 组件在同一位置渲染，React 丢弃它的 状态。

因此，每次您离开显示组件的页面时，您的数组都会被删除。