本文详解 blazor 应用中因参数绑定方式错误与事件回调缺失，导致子组件（如笔记卡片）无法正确渲染父组件传入的标题和描述内容的问题，并提供可落地的修复方案。
在 Blazor 应用中构建动态笔记列表时，一个常见却隐蔽的陷阱是：表单提交后新笔记对象被成功添加到集合中，但渲染出的
1. 表单组件未将用户输入值回传给父组件
FormCrearNotas 组件内部通过 @bind-value="@Titulo" 绑定输入框，但该绑定仅作用于组件自身字段（public string Titulo { get; set; }），不会自动同步到父组件 ListaNotas 的 NuevoTitulo 属性。由于 ListaNotas 中的 NuevoTitulo 和 NuevaDescripcion 始终为 null 或空字符串，AgregarNota(NuevoTitulo, NuevaDescripcion) 实际传入的是无效值。
✅ 修复方式：使用双向绑定事件回调（推荐）
在 FormCrearNotas.razor.cs 中定义自定义事件回调，显式通知父组件获取当前表单值：
// FormCrearNotas.razor.cs
[Parameter] public EventCallback<string> OnTitleChanged { get; set; }
[Parameter] public EventCallback<string> OnDescriptionChanged { get; set; }
private async Task OnTitleInputChanged(ChangeEventArgs e)
{
Titulo = e.Value?.ToString();
await OnTitleChanged.InvokeAsync(Titulo);
}
private async Task OnDescriptionInputChanged(ChangeEventArgs e)
{
Descripcion = e.Value?.ToString();
await OnDescriptionChanged.InvokeAsync(Descripcion);
}对应更新 .razor 文件中的输入框（禁用 bind-value，改用 @onchange）：
<input class="..." @onchange="OnTitleInputChanged" value="@Titulo" /> <input class="..." @onchange="OnDescriptionInputChanged" value="@Descripcion" />
⚠️ 注意：@bind-value 是单向绑定（仅设置值），而 @bind（如 ）才是双向绑定 shorthand；但在此场景下，因需跨组件通信，显式 @onchange + EventCallback 更可控、更清晰。
2. 父组件未订阅表单变更并更新本地状态
在 ListaNotas.razor 中，需监听表单输入变化，实时更新 NuevoTitulo/NuevaDescripcion：
<FormCrearNotas
@ref="formRef"
CancelarNota="@(() => MostrarFormulario = false)"
CrearNota="@AgregarNota"
OnTitleChanged="@((value) => NuevoTitulo = value)"
OnDescriptionChanged="@((value) => NuevaDescripcion = value)" />同时确保 AgregarNota 方法调用前状态已刷新（Blazor 会自动触发重渲染）：
public void AgregarNota()
{
if (!string.IsNullOrWhiteSpace(NuevoTitulo) && !string.IsNullOrWhiteSpace(NuevaDescripcion))
{
notas.Add(new Nota { Titulo = NuevoTitulo, Descripcion = NuevaDescripcion });
NuevoTitulo = string.Empty;
NuevaDescripcion = string.Empty;
MostrarFormulario = false;
}
}3. 优化 的参数接收逻辑（消除冗余）
当前 BlocNota 同时声明了 [Parameter] public Nota Nota { get; set; } 和 [Parameter] public string Titulo { get; set; }，但 ListNotes 中实际只传了 Titulo 和 Descripcion 字符串，未传 Nota 对象 —— 导致 Nota 为 null，而 Titulo/Descripcion 又因上述问题为空。应统一数据源：
✅ 推荐修改 BlocNota.razor.cs，仅依赖 Nota 参数（更符合单一数据源原则）：
[Parameter] public Nota Nota { get; set; } // 移除 Titulo/Descripcion 参数
// 视图中直接使用 Nota.Titulo / Nota.Descripcion
<h3 class="text-white font-bold rounded-lg">@Nota?.Titulo</h3>
<p class="text-white rounded-lg">@Nota?.Descripcion</p>并在 ListaNotas.razor 中正确传递 Nota 实例：
@foreach (var nota in notas)
{
<BlocNota Nota="@nota" BorrarNota="@(() => EliminarNota(nota))" />
}总结：Blazor 组件通信黄金法则
- ✅ 表单子组件不持有业务状态：输入值应通过 EventCallback
主动“推”给父组件，而非等待父组件“拉”。 - ✅ 父组件统一管理状态：所有待提交数据（NuevoTitulo 等）必须由父组件声明并维护，子组件仅负责采集与转发。
- ✅ 避免参数重复定义：若 BlocNota 已接收完整 Nota 对象，就无需再拆分为独立字符串参数，减少不一致风险。
- ✅ 调试技巧：在 @foreach 循环内添加
@nota.Titulo | @nota.Descripcion
直接验证数据是否存在，快速定位是数据未生成还是渲染未生效。
遵循以上修正，笔记列表即可正确显示标题与描述，且具备良好的可维护性与扩展性。
