Blazor中循环更新C# List字符串触发索引越界问题

你的索引越界错误是Blazor @for循环的闭包捕获陷阱导致的。循环变量i是共享的，所有输入框的绑定都会引用同一个i。当你添加新链接触发组件重渲染后，循环结束时i的值等于列表总长度，之前渲染的输入框在编辑时会用这个超出范围的i去访问列表，直接触发索引越界异常。

有两种简单的解决办法：

办法1：循环内创建局部变量存索引 #

在每次循环迭代里创建一个局部变量index保存当前的i，让每个输入框绑定到独立的索引值：

@if (contact.SocialMedia != null)
{
    @for (int i = 0; i < contact.SocialMedia.Count; i++)
    {
        var index = i; // 关键：用局部变量捕获当前索引
        <input type="text" class="form-control" 
                placeholder="Social Media Link" 
                @bind-value="contact.SocialMedia[index]" />
    }
}

办法2：改用foreach循环（更推荐） #

直接遍历contact.SocialMedia的每个元素，Blazor会自动处理每个输入框的绑定上下文，彻底避开闭包问题：

@if (contact.SocialMedia != null)
{
    @foreach (var link in contact.SocialMedia)
    {
        <input type="text" class="form-control" 
                placeholder="Social Media Link" 
                @bind-value="link" />
    }
}

你的StashNewSocialLink方法里手动调用StateHasChanged()是多余的——Blazor在绑定事件触发后会自动触发组件重渲染，删掉这行代码就行：

private void StashNewSocialLink()
{
    contact.SocialMedia ??= new List<string>(); // 用空合并简化判空逻辑

    if (string.IsNullOrWhiteSpace(contactNewSocialLink))
    {
        contactNewSocialLink = "";
        return;
    }

    contact.SocialMedia.Add(contactNewSocialLink);
    contactNewSocialLink = "";
    // 移除this.StateHasChanged();
}

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