使用 Blazor 创建动态 url 在循环时给出错误的引用

Question

我正在创建 Blazor WebAssembly 应用程序，并在循环内容以生成 mp3 文件的 url 时遇到问题。

媒体文件名为“1.mp3”、“2.mp3”、“3.mp3”...等

假设您有一个包含以下内容的剃刀页面：

@* set counter variable to 1 *@
@InitCounter()

@foreach(string str in strings)
{
   <div>
       <span @onclick="() => PlayUrl(counter)">@counter</span>
       <span>@str</span>
   </div>

   @* Increment counter variable by 1 *@
   @IncrementCounter()
}

@code
{
    public int counter = 1;

    public string InitCounter()
    {
       counter = 1;
       return string.Empty;
    }

    public string IncrementCounter()
    {
       counter++;
       return string.Empty;
    }
}

当我在浏览器中单击特定的 span 元素时，我无法理解为什么函数

PlayUrl

被调用时使用了错误的值？

我们可以说

strings

是这样定义的：

   strings[] strings = { "aaa", "bbb" };

这应该会生成一些与此类似的 html：

<div>
  <span b-2e01zi41cp="">1</span>
  <span b-2e01zi41cp="">aaa</span>
</div>
<div>
  <span b-2e01zi41cp="">2</span>
  <span b-2e01zi41cp="">bbb</span>
</div>

无论我单击哪个 span 元素，它都会始终使用参数“3”调用 PlayUrl。

有没有人可以解释为什么以及如何让 Blazor 将正确的值传递给 PlayUrl？

Answer 1

您已将

foreach()

变成了

for()

循环，anf for 循环和 lambda 是危险的组合。

@foreach(string str in strings)
{
   int counterCopy = counter;
   <div>
       <span @onclick="() => PlayUrl(counterCopy)">@counter</span>
       <span>@str</span>
   </div>

   @* Increment counter variable by 1 *@
   @IncrementCounter()
}

如需解释，请查找无数重复项之一，搜索术语“关闭循环变量”