VueFrontend's questions

我使用 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>
    );
}

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

当您单击按钮时，如何从 vuex 发送一个操作并将数据属性之一与 vuex 的 getter 等同起来？

<template>
    <div id="app">
        <div class="btns">
            <button id="btn--send" @click="sendData">send data</button> 
            <button id="btn--clear" @click="cleanData">clean data</button> // This place
        </div>
     </div>
</template>

我的 Vuex：

export default {
    state: {
        dataSelect: ""
    },
    actions: {
        cleanData({commit}) {
            commit("clean")
        }
    },
    mutations: {
        clean(state) {
            state.dataSelect = ""
        }
    },
    getters: {
            DATA_SELECTED(state) {
            return state.dataSelect
        }
    }
}

在此组件中需要更改数据

<template>
    <div class="SelectFloors">
        <p id="title--choose">Выбранный этаж</p>
        <VueSimpleSelect
            @change="chooseFloor"
            :options="floors"
            v-model="selectedFloor"
            placeholder="Выберите этаж"
            class="sel__floor"
        />
    </div>
</template>

<script>
export default {
    name: "selectFloors",
    data() {
        return {
            floors: [
                {
                    label: 'floor 1',
                    value: 1
                },
                {
                    label: 'floor 2',
                    value: 2
                },
                {
                    label: 'floor 3',
                    value: 3
                },
            ],
            selectedFloor:''
        }
    },
    methods: {
        
    },
}
</script>

在此组件中，当 pepson 单击按钮（在第一个组件中）时需要清理数据， this.selectedFloor need = ''

如何才能做到这一点？谢谢