我如何查看哪个代码正在设置我的组件参数 属性

How can i see which code is setting my components parameter property

我有一个关于 Blazor 组件的参数设置生命周期的一般性问题。

我在我的组件上进行了普通的双向绑定。 当我测试这个绑定时,最初似乎在更改参数值时没有任何反应。但在 debbung 期间,我注意到确实所有绑定步骤都已成功完成。绑定参数在父组件和子组件上都有正确的值。

现在奇怪的事情来了。 我没有运行调试到最后。我才往前走,看到子组件的属性又被设置成了原来的值。 所以我浏览了我的整个存储库以查找 setter 的触发器。现在我决定重写子组件上的 SetParameterAsync 方法。然后我看到一个框架,它将我的 属性 设置为旧值。

现在是我的问题。有谁知道找出哪个代码或组件设置 属性 的方法吗? 我有什么对象可以看到参数设置操作的发起者吗?

由于您没有提供任何细节,我将描述在调试组件中的棘手问题时我想要做什么。

  1. 重写所有组件事件并查看它们在页面呈现上的命中率。如果是几次,你需要明白为什么。
  2. 使用Debug.Writeline输出相关信息到输出window.
  3. 在断点处检查调用堆栈以查看谁在调用什么。
  4. 提供 class 个实例 Guid,这样您就可以跟踪您是否在处理同一个实例。您可以将它与 Debug.Writeline 结合使用以输出对象的每个实例化。
  5. 如果您是 运行 任何异步方法,请找出您认为正在发生的事情,然后使用上述方法在调试模式下测试您的模型。

对异步代码的误解经常会导致我认为您正在逃避的问题。

on changing the parameter value

您不应该更改参数值。参数 属性 是自动 属性。你不改变它的价值。只有父组件应该改变它的值。

您的子组件应如下所示:

ChildComponent.razor

<p><input type="text" @bind="BoundValue" @bind:event="oninput" /></p>

<p>
    <button @onclick="ChangeValue">Change from Child</button>
</p>



@code {
    [Parameter]
    public string Property { get; set; }

    [Parameter]
    public EventCallback<string> PropertyChanged { get; set; }

    private string BoundValue
    {
        get => Property;
        set => PropertyChanged.InvokeAsync(value);
    }

    private Task ChangeValue()
    {
        return PropertyChanged.InvokeAsync($"New value set in Child {DateTime.Now}");
    }
} 

您的父组件可能如下所示:

@page "/"


<ChildComponent @bind-Property="MyProperty"/>

<p>MyProperty: @MyProperty</p>

@code 
{
    private string MyProperty { get; set; } = "Value sent to the child.";
} 

请注意,子组件中名为 Property 的参数 属性 永远不会更改。这就是你应该如何编码。

正如你现在所理解的,只有父组件应该改变参数值,而不是子组件。这解释了为什么您的 属性 被分配了旧值。更具体地说,当您的父组件在几种情况下重新呈现时。以下内容来自文档:

A child component receives new parameter values that possibly overwrite existing values when the parent component rerenders. Accidentially overwriting parameter values in a child component often occurs when developing the component with one or more data-bound parameters and the developer writes directly to a parameter in the child:

The child component is rendered with one or more parameter values from the parent component. The child writes directly to the value of a parameter. The parent component rerenders and overwrites the value of the child's parameter. More here

注意:在这方面,调试对您帮助不大...另请注意,Blazor 有特定的算法来确定应覆盖哪些类型以及在什么条件下。调试对你帮助不大。它只会让您感到困惑,并让您相信 Blazor 是有缺陷的软件。但是这里发生的事情是设计使然...