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

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

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

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

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

现在我的问题。有没有人知道一种方法来找出哪个代码或组件设置了属性。我有什么对象可以观察参数设置操作的发起者吗？

解决方法

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

覆盖所有组件事件并查看它们在页面渲染中被点击的频率。如果是多次，您需要了解原因。
使用 Debug.Writeline 将相关信息输出到输出窗口。
在断点处检查调用堆栈，看看谁在调用什么。
为类实例提供 Guid，以便您可以跟踪是否处理相同的实例。您可以将它与 Debug.Writeline 结合使用以输出对象的每个实例化。
如果您正在运行任何异步方法，请绘制出您认为正在发生的事情，然后使用上述方法在调试模式下测试您的模型。

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

关于改变参数值

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

您的子组件应如下所示：

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 的参数属性永远不会改变。这就是你应该如何编码。

正如你现在所理解的，只有父组件应该改变参数值，而不是子组件。这解释了为什么您的财产被分配了旧值。更具体地说，当您的父组件在几个条件下重新渲染时。以下内容来自文档：

当父组件重新渲染时，子组件接收可能覆盖现有值的新参数值。在使用一个或多个数据绑定参数开发组件并且开发人员直接写入子组件中的参数时，经常会意外覆盖子组件中的参数值：

子组件使用来自父组件的一个或多个参数值呈现。孩子直接写入参数的值。父组件重新渲染并覆盖子组件参数的值。 More here

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