链接到 GitHub 以快速访问最小可重现示例（下面也提供了代码）： https: //github.com/thecodeiackiller/cascadingSelectListProblem
- #1）我有一份锻炼清单。
- #2)我有 2 个枚举 (WorkoutType 和 ExerciseType)，可以过滤锻炼列表。
- #3)我有一个 EditForm，它允许用户： 选择 WorkoutType（LowerBody 或 UpperBody），它会过滤锻炼列表，并 选择 ExerciseType（Main、Secondary、Accessory），它会进一步过滤列表。
注意：对于那些不熟悉健身领域的人来说，在给定的锻炼中，您通常有一种锻炼类型（腿部锻炼、上身锻炼等），并且在该锻炼中，您有运动类型（主要/较重的运动、次要运动和辅助运动（锻炼小肌肉）。
预期按时间顺序排列的用户流量：
-
- 选择了 WorkoutType 并过滤了练习列表（我相信我的表格已经成功做到了这一点）。
-
- 对于 EditForm 中的第一行，用户选择一个 ExerciseType（主要、次要、附件）并且列表再次被过滤。
-
- 用户从现在经过两次筛选的列表中选择一项练习的名称。仍在第一行。
-
- 用户导航至第二行。
-
- 用户选择锻炼类型
-
- 用户从列表中选择新的练习名称（应根据第二行所选的练习类型进行过滤）。
问题：第二行的练习名称列表没有更新。练习名称列表与第一个练习相同，尽管练习类型不同，这应该会改变显示的练习。
我当前实现的AddWorkout.razor组件：
@using stateManagementMinimumReproducibleExample.Repositories
@using stateManagementMinimumReproducibleExample.Models
@page "/addworkout"
@rendermode InteractiveServer
@inject UserExerciseRepository userExerciseRepository
<EditForm Model="userExercise">
<label for="workoutType"> Workout Type: </label>
<InputSelect id="workoutType" @bind-Value="userExercise.WorkoutType" @bind-Value:after="GetExercisesByWorkoutType">
@foreach (var type in Enum.GetValues(typeof(WorkoutType)))
{
<option value="@type">@type</option>
}
</InputSelect>
@for (int i = 0; i < numberOfExercisesInWorkout; i++)
{
var j = i;
if (j >= exerciseListForSelectedDay.Count)
{
exerciseListForSelectedDay.Add(new UserExercise());
}
<div>
<label for="exerciseType"> Exercise Type: </label>
<InputSelect id="exerciseType" @bind-Value="exerciseListForSelectedDay[j].ExerciseType" @bind-Value:after="GetExercisesByExerciseType">
@foreach (var type in Enum.GetValues(typeof(ExerciseType)))
{
<option value="@type">@type</option>
}
</InputSelect>
<label for="exerciseName"> Exercise: </label>
<InputSelect id="exerciseName" @bind-Value="exerciseListForSelectedDay[j].ExerciseId">
@foreach (var exercise in listOfExerciseByExerciseType)
{
<option value="@exercise.Id">@exercise.Name</option>
}
</InputSelect>
</div>
}
</EditForm>
@code {
private int numberOfExercisesInWorkout = 2;
private UserExercise userExercise = new();
private List<UserExercise> exerciseListForSelectedDay = new();
public List<Exercise> listOfExercisesByWorkoutType = new();
public List<Exercise> listOfExerciseByExerciseType = new();
public async Task GetExercisesByWorkoutType()
{
listOfExercisesByWorkoutType = await userExerciseRepository.GetExercisesBasedOnWorkoutType(userExercise.WorkoutType);
StateHasChanged();
}
public void GetExercisesByExerciseType()
{
listOfExerciseByExerciseType = userExerciseRepository.GetExercisesFromWorkoutListBasedOnExerciseType(listOfExercisesByWorkoutType, userExercise.ExerciseType);;
}
}
我考虑过创建一个字典来存储锻炼中每项练习的练习列表的可能性。此外，我还考虑将 List 作为属性存储在我的 UserExercise 类中，然后将过滤后的练习列表添加到该属性中。我不确定我应该走哪条路，或者是否存在任何潜在的特定于 Blazor 的状态管理替代方案。
上面的代码应该能给你足够的信息来诊断问题。如果你需要直观的了解，以下是在分叉和克隆 GitHub 存储库后快速重现问题的步骤：
- 启动应用程序
- 导航至 /addworkout 端点
- 选择锻炼类型（整个表格）
- 选择锻炼类型（第一行）
- 选择一项练习（第一行）
- 选择锻炼类型（第二行）
- 选择一项练习（第二行）
此时，您将看到，由于选择了与第一行不同的 ExerciseType，因此第二行的筛选列表尚未更新。我如何才能让第二行（及以后）的适当练习列表出现？谢谢。
