UI Blazor Child Component UI не обновляется об изменении свойства ⇐ Javascript

[Anonymous]

Я новичок в Blazor, но у меня есть сильный опыт в React. Я подозреваю, что могу сделать Blazor работать, как React, и это может вызвать мою проблему. Полем Одним из таких шагов является Stepone, который содержит компонент ToggleGroup, который позволяет пользователям выбирать тип взаимодействия. Как ни странно: < /p>
Тег < /code> правильно печатает обновленный идентификатор, что означает, что сами данные изменяются. Страница вызывает повторное рендерин. Мне нужна помощь в выяснении, почему мой пользовательский интерфейс сразу не обновляется, когда @accessrequest.natureFengagementId изменений.

Код: Выделить всё

 public abstract class StepBase : ComponentBase
{

[Parameter] public Request NewAccessRequest { get; set; } = default!;
[Parameter] public EventCallback NewAccessRequestChanged { get; set; } = default!;
[Parameter] public EventCallback OnStepValidChanged { get; set; } = default!;

public required MudForm StepForm;
protected bool StepSuccess;

// Local copy of the request for binding
private Request _localRequest = default!;

// Property that binds to the local request and updates parent when changed
protected Request AccessRequest
{
get => NewAccessRequest;
set
{
if (!EqualityComparer.Default.Equals(NewAccessRequest, value))
{

NewAccessRequestChanged.InvokeAsync(value);
}
}
}

// Ensure local copy is in sync when parent updates the parameter
protected override void OnParametersSet()
{
if (!EqualityComparer.Default.Equals(NewAccessRequest, _localRequest))
{
_localRequest = NewAccessRequest;

}
}

// Method to validate the step
public async Task ValidateStep()
{
if (StepForm != null)
{
await StepForm.Validate();
await OnStepValidChanged.InvokeAsync(StepSuccess);
}

return StepSuccess;
}
}

Этот дочерний компонент наследует от базы Stepbase и обновляет AccessRequest При изменении взаимодействия.

Код: Выделить всё

 public partial class StepOne : StepBase
{
[Parameter] public List Engagements { get; set; } = [];

private void OnEngagementChanged(int newEngagementId)
{
AccessRequest = RequestBuilder.From(AccessRequest)
.WithNatureOfEngagementId(newEngagementId)
.Build();
}

}
< /code>
UI дочернего компонента: < /p>
@inherits StepBase








Selected ID @AccessRequest.NatureOfEngagementId

Этот пользовательский Togglegroup компонент используется для выбора:

Код: Выделить всё

      public partial class ToggleGroup : MudFormComponent
{
// The text to display above the toggle group
[Parameter] public string? Label { get; set; }

[Parameter] public Dictionary? AdditionalAttributes { get; set; }

// The list of toggle options
[Parameter] public IEnumerable? Options { get; set; }

[Parameter] public SelectionMode SelectionMode { get; set; } = SelectionMode.SingleSelection;

[Parameter]
[Category(CategoryTypes.List.Behavior)]
public EventCallback ValueChanged { get; set; }

[Parameter]
[Category(CategoryTypes.List.Behavior)]
public EventCallback ValuesChanged { get; set; }

[Parameter]
public T? Value { get; set; }

[Parameter]
public IEnumerable? Values { get; set; }

// Single selection binding
private T? SingleSelectedValue
{
get => Value;
set
{
if (!EqualityComparer.Default.Equals(_value, value))
{
_value = value;
Value = value;
Touched = true;
BeginValidateAsync();
ValueChanged.InvokeAsync(value);
}
}
}

// Multiple selection binding
private IEnumerable? MultiSelectedValues
{
get => Values;
set
{
if (!EqualityComparer.Default.Equals(_value as IEnumerable, value))
{
_value = value != null ? (T?)(object?)value : default;
Touched = true;
Values = value;
ValuesChanged.InvokeAsync(value);
BeginValidateAsync();

}
}
}

public ToggleGroup() : base(converter: new MudBlazor.Converter())
{
}

protected override Task ValidateValue()
{
var errors = new List();
ValidationErrors.Clear();

if (Options == null || !Options.Any())
{
// If there are no available options, mark as error
Error = Required;
}
else
{
if (SelectionMode == SelectionMode.SingleSelection)
{
// Ensure SingleSelectedValue is present in Options
Error = Required && (SingleSelectedValue == null || !Options.Any(o =>  EqualityComparer.Default.Equals(o.Value, SingleSelectedValue)));
}
else
{
// Ensure all MultiSelectedValues exist in Options
Error = Required && (MultiSelectedValues == null || !MultiSelectedValues.All(val => Options.Any(o => EqualityComparer.Default.Equals(o.Value, val))));
}
}

if (Error)
{
ValidationErrors.Add(RequiredError);
}

ValidationErrors = errors;
return Task.CompletedTask;
}

}
< /code>
Компонент переключения UI: < /p>
    @typeparam T
@inherits MudFormComponent


@if (Label != null)
{

@(Label + (Required ? "*" : ""))

}

@if (SelectionMode == SelectionMode.SingleSelection)
{


@foreach (var option in Options ?? Enumerable.Empty())
{

@option.Label

}

}
else
{


@foreach (var option in Options ?? Enumerable.Empty())
{

@option.Label

}

}

@if (Error)
{

@(string.IsNullOrWhiteSpace(ErrorText) ? RequiredError : ErrorText)

}

Проблема заключается в том, что пользовательский интерфейс дочернего компонента не повторно рендеринг при изменении свойства @accessrequest.natureFengagementId . Правильный идентификатор напечатан внутри тега , но ToggleGroup не обновляется, если только другой повторный рендер не запускается в другом месте.
Я был на этом некоторое время Теперь и хотел бы, если бы другим глазом было взглянуть на это, возможно, они смогут найти проблему.

Подробнее здесь: https://stackoverflow.com/questions/794 ... rty-change