Blazor 循環、閉包和綁定

Question

我將其分解為一個簡單的示例，即循環遍歷某些內容，但將其分解為關卡。 我正在內部循環中實例化一個本地副本，但這似乎不起作用。 當您嘗試更改輸入中的值時，它會將它們全部更改為計數器變量。

這是 Blazor 小提琴https://blazorfiddle.com/s/d02wswws中的代碼

@for (var i = 0; i < levels; i++)
{
    <div>Level @i</div>
    @for (var j = 0; j < stuffPerLevel; j++)            
    {
        int copy = allStuffCounter;
        <input type="text" @bind="stuff[copy]" @bind:event="oninput" />
        <div>@stuff[copy]</div>
        if(allStuffCounter < stuffCounterLimit) allStuffCounter++;
    }
}

@code
{
  string[] stuff = {"some stuff 1", ... ,"some stuff 20"};
                    
  int allStuffCounter = 0;
  int levels = 3;
  int stuffPerLevel = 4;
  int stuffCounterLimit = 11;
}

Answer 1

問題是 allStuffCounter 的allStuffCounter 。 任何更改（oninput）都會觸發重新渲染，但從 allStuffCounter 的舊值開始。

修復：

@{ int allStuffCounter = 0; 

  for (var i = 0; i < levels; i++)
  {    
    int copy = allStuffCounter;
    ...      
    if(allStuffCounter < stuffCounterLimit) allStuffCounter++;
    
  }
}


@code
{                  
  //int allStuffCounter = 0;
}

Answer 2

復制並測試...

@for (var i = 0; i < levels; i++)
{
    <div>Level @i</div>

    @for (var j = 0; j < stuffPerLevel; j++)
    {
         int copy = allStuffCounter;

        <input @bind="stuff[copy]" @bind:event="oninput" type="text" />

        <div>@stuff[copy]</div>
        allStuffCounter++;

    }

}

@code
{
    string[] stuff = { "some stuff 1", "some stuff 2", "some stuff 3", "some stuff 4",
        "some stuff 5", "some stuff 6","some stuff 7","some stuff 8","some stuff 9",
        "some stuff 10","some stuff 11","some stuff 12","some stuff 13","some stuff 14",
        "some stuff 15","some stuff 16","some stuff 17","some stuff 18","some stuff 19", "some stuff 20" };


    int allStuffCounter = 0;
    int levels = 3;
    int stuffPerLevel = 4;
    // Superfluous...
   // int stuffCounterLimit = 11;

    protected override void OnAfterRender(bool firstRender)
    {
        allStuffCounter=0;
    }
}