React多评分组件更新异常求助：仅首个组件值可更新

DevOps 小满

2026-7-26

问题根源与解决方案

1. 模态框ID全局重复（核心问题）

所有StarCard组件渲染的模态框都使用同一个id="exampleModal"，而Bootstrap模态框是通过ID匹配触发的。这导致无论点击哪个电影卡片的评分按钮，只会唤起第一个模态框，自然只有第一个组件的状态会被修改。

修改方式：
给每个模态框生成唯一ID，用电影ID拼接：

// StarCard组件中，按钮的data-target修改为
<button
    type="button"
    data-toggle="modal"
    data-target={`#exampleModal-${movie.id}`}
    style={{ background: "inherit", border: "none" }}
    onClick={() => {
        setRating(ratedValue);
    }}>
    {/* 按钮内容 */}
</button>

// 对应的模态框id修改为
<div className="modal fade" id={`exampleModal-${movie.id}`} tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    {/* 模态框内容 */}
</div>

2. useEffect依赖缺失，无法响应数据更新

StarCard中的useEffect依赖数组为空，只会在组件首次挂载时执行一次。当从详情页评分返回列表页，或者用户/电影数据变化时，组件不会重新拉取最新的评分信息。

修改方式：
将movie.id和user加入依赖数组，确保相关数据变化时重新执行异步逻辑：

useEffect(() => {
    (async () => {
        try {
            const ratedValue = await GetRating({ user_id: user._id, movie_id: movie.id });
            setRatedValue(ratedValue);
        } catch (err) {}

        const listsData = await fetchLists(user._id);
        setLists(listsData);
    })();
}, [movie.id, user]);