动态列表中MudRating组件值丢失/错乱问题的原因与解决

Blazor为了优化渲染性能，会复用DOM元素和组件实例。当动态搜索列表刷新时，如果列表项没有绑定唯一标识，Blazor会根据组件在列表中的位置来复用实例。而MudRating组件自身维护着内部评分状态，当它被复用到新的列表项上时，不会自动重置或同步到新项的初始评分，就会出现评分错乱、丢失，甚至显示其他项旧评分的情况。

核心是给列表里的每个MudRating（或列表项容器）加上@key属性，绑定到列表项的唯一标识符（比如实体ID），让Blazor明确每个列表项对应唯一的组件实例，避免错误复用。

举个实际代码例子，假设你的搜索结果是Product列表，每个Product有Id（唯一主键）和CurrentRating（初始评分）：

@foreach (var product in SearchResults)
{
    <div class="list-item" @key="product.Id">
        <h3>@product.Name</h3>
        <MudRating Value="@product.CurrentRating" 
                   ValueChanged="(newRating) => UpdateProductRating(product.Id, newRating)" />
    </div>
}

或者直接把@key加在MudRating组件上：

@foreach (var product in SearchResults)
{
    <h3>@product.Name</h3>
    <MudRating @key="product.Id"
               Value="@product.CurrentRating" 
               ValueChanged="(newRating) => UpdateProductRating(product.Id, newRating)" />
}

注意事项 #

• @key必须用每个列表项独有的值，绝对不能用循环索引（比如i）——因为搜索刷新后，相同索引对应的可能是完全不同的项，还是会触发复用错误。
• 评分变化时，一定要更新对应列表项的评分属性（比如上面的product.CurrentRating），这样即使列表刷新，新渲染的组件也能读取到正确的初始值。

内容的提问来源于stack exchange，提问作者vernou