Blazor WebAssembly子组件不刷新无报错，DynamicComponent加载也无响应求助

云原生阿岚

2026-9-27

问题根因

视觉无变化不等于组件未刷新：你在NewGame方法中对变量b的赋值会被循环第一行的b = Convert.ToInt32(Math.Floor(c / 4))完全覆盖，两次渲染生成的所有卡片的left、top、z-index参数完全一致，视觉上没有差异，会误以为组件没有触发重渲染。
DynamicComponent加载场景的缓存问题：如果该组件是通过DynamicComponent动态加载，未指定唯一@key时，Blazor的差分算法会复用原有组件的渲染缓存，即使内部状态触发了StateHasChanged，也可能出现未更新的情况。

修复方案

1. 修正业务计算逻辑

新增独立的全局偏移变量，不要被循环逻辑覆盖，确保每次点击NewGame后卡片的渲染参数有变化：

<div id="StackOfCards">
    @while (a < 52)
    {
        b = Convert.ToInt32(Math.Floor(c / 4));
        lpx = 40 + (b * 0.1) + offset + "%";
        tpx = 41 + (b * 0.1) + offset + "%";
        <div class="cards" style="left: @lpx; top: @tpx; z-index: @a;"></div>
        c--;
        a++;
    }
</div>
<button id="btnNewGame" @onclick="NewGame" style="top: 54%;left: 52%;position: absolute;">New game</button>

@code {
    decimal a = 0;
    int b = 0;
    decimal c = 52;
    string lpx = "";
    string tpx = "";
    // 新增全局偏移量，每次新游戏更新
    decimal offset = 0;

    public void NewGame()
    {
        a = 0;
        c = 52;
        offset += 2;
        StateHasChanged();
    }
}

2. DynamicComponent加载场景加唯一Key

给DynamicComponent指定唯一@key，需要刷新时更换Key即可强制Blazor重建组件实例：

<DynamicComponent Type="@typeof(你的子组件类名)" @key="@componentKey" />

@code {
    Guid componentKey = Guid.NewGuid();

    void 刷新子组件方法()
    {
        componentKey = Guid.NewGuid();
    }
}