Laravel Livewire -在第一个表单元中双渲染一个活线组件

Question

我的livewire组件刀片文件中有以下代码

<span class="px-2 py-1 rounded-lg {{ $backgroundColor }} {{ $textColor }}">
    {{ $status->name }}
</span>

然后，我将它呈现在这样的一个表中：

<tbody>
    @foreach($initiatives as $key => $initiative)
        <tr class="justify-center text-center">
            <th class="p-2">{{ $initiative->name }}</th>
            <td class="p-2">{{ $initiative->ease_of_implementation }}</td>
            <td class="p-2">
                <livewire:status-badge :status="$initiative->status"></livewire:status-badge>
            </td>
            <td class="p-2">{{ $initiative->priority->name }}</td>
            <td class="p-2">{{ $initiative->owner_id }}</td>
        </tr>
    @endforeach
</tbody>

我正在发现的是，该表在第一个中呈现前两个livewire组件，在第二个中不呈现任何内容，然后通常从第三个组件中呈现：

​

​

在检查HTML时，我还可以看到第一个组件中有两个组件。为什么它要双重呈现第一个组件，以及如何修复它？

编辑

下面是一个倡议中的例子：

App\Models\Initiative {#1502 ▼ // resources\views/livewire/project-span.blade.php
  #connection: "mysql"
  #table: "initiatives"
  #primaryKey: "id"
  #keyType: "int"
  +incrementing: true
  #with: []
  #withCount: []
  +preventsLazyLoading: false
  #perPage: 15
  +exists: true
  +wasRecentlyCreated: false
  #escapeWhenCastingToString: false
  #attributes: array:18 [▼
    "id" => 7
    "name" => "dolores"
    "description" => "Quia et architecto ea. Sed possimus et optio quaerat veniam ratione quibusdam nam. Adipisci at quia nemo voluptas. Fugiat qui natus illum."
    "problem_statement" => "Blanditiis fugiat reiciendis dolor officia beatae voluptas dolorum. Placeat dicta est voluptatibus. Animi earum sit est et cumque eius. Fugit itaque tempore dol ▶"
    "desired_outcome" => "Qui atque esse suscipit odio quo magnam. Ipsa cumque vel omnis totam. Est doloribus optio quia est porro. Quia id qui porro totam."
    "approach_methodology" => "Accusantium ratione eveniet sint eos placeat dolor. Et quia molestias voluptatibus. Vel consectetur ut sequi itaque consectetur et iure sint."
    "target_completion" => "2022-08-01"
    "ease_of_implementation" => 2
    "project_id" => 1
    "owner_id" => 1
    "strategic_objective_id" => 3
    "status_id" => 2
    "priority_id" => 1
    "operating_location_id" => 1
    "site_id" => 1
    "tenant_id" => 1
    "created_at" => "2022-10-27 21:47:09"
    "updated_at" => "2022-10-27 21:47:09"
  ]
  #original: array:18 [▶]
  #changes: []
  #casts: []
  #classCastCache: []
  #attributeCastCache: []
  #dates: []
  #dateFormat: null
  #appends: []
  #dispatchesEvents: []
  #observables: []
  #relations: array:3 [▼
    "owner" => App\Models\User {#1531 ▶}
    "status" => App\Models\Status {#1559 ▼
      #connection: "mysql"
      #table: "statuses"
      #primaryKey: "id"
      #keyType: "int"
      +incrementing: true
      #with: []
      #withCount: []
      +preventsLazyLoading: false
      #perPage: 15
      +exists: true
      +wasRecentlyCreated: false
      #escapeWhenCastingToString: false
      #attributes: array:6 [▼
        "id" => 2
        "name" => "Active"
        "color" => "cyan"
        "tenant_id" => 1
        "created_at" => null
        "updated_at" => null
      ]
      #original: array:6 [▶]
      #changes: []
      #casts: []
      #classCastCache: []
      #attributeCastCache: []
      #dates: []
      #dateFormat: null
      #appends: []
      #dispatchesEvents: []
      #observables: []
      #relations: []
      #touches: []
      +timestamps: true
      #hidden: []
      #visible: []
      #fillable: []
      #guarded: []
    }
    "priority" => App\Models\Priority {#1549 ▶}
  ]
  #touches: []
  +timestamps: true
  #hidden: []
  #visible: []
  #fillable: []
  #guarded: []
}

Answer 1

Livewire最有可能“丢失”组件的跟踪；建议使用某种密钥。根据文档

<livewire:user-profile :user="$user" :wire:key="$user->id">

所以，在你的例子中：

<livewire:status-badge :status="$initiative->status" :wire:key="$initiative->id">

看看这对复制是否有帮助。