javascript - Live-wire - 实时聊天没有正确响应

Question

我正在尝试使用 live-wire 来看看如何在我即将到来的项目中实现它。这个想法是一个简单的聊天（用户输入正文并单击发送，然后消息将在聊天的底部）

到目前为止一切正常，直到我点击发送按钮。

这是我点击发送之前的图片

这是我点击发送后发生的事情

我觉得问题出在这部分代码中，我将消息发送到火线刀片

  @foreach ($messages as $message)
            @if($message->isYou())
                <livewire:conversations.conversation-message-own :message="$message" :key="$message->id" />
            @else
                <livewire:conversations.conversation-message :message="$message" :key="$message->id" />
            @endif
        @endforeach

这是组件

public $body= "";
public $conversation;

public function mount(Conversation $conversation)
{
    $this->conversation = $conversation;
}

public function reply()
{
    $this->validate([
        'body' => 'required',
    ]);
    $message = $this->conversation->messages()->create([
        'user_id' => user()->id,
        'body' => $this->body,
    ]);
    $this->emit('message.created',$message->id);
    $this->body = "";
}
public function render()
{
    return view('livewire.conversations.conversation-reply');
}

}

最后是监听事件组件：

 class ConversationMessages extends Component
{

public $messages;

public function mount(Collection $messages)
{
    $this->messages = $messages;
}

public function render()
{
    return view('livewire.conversations.conversation-messages');
}
protected function getListeners()
{
    return [
    'message.created' => 'prependMessage',
    ];
}

public function prependMessage($id)
{
    $this->messages->prepend(Message::find($id));
}

检查日志中的问题是

Uncaught (in promise) TypeError: Cannot read property 'data' of null 但我认为它与聊天数据无关！

提前致谢

Answer 1

问题在于传递给对话消息组件的键。Livewire 会在尝试渲染这些组件时中断，即使使用 if 分隔也是如此。您将需要生成不同的键，例如字符串 'message-own-' . $message->id和'message-'. $message->id . 我用数据测试了你的代码rand()：

@foreach ($messages as $message)
    @if($message->isOwn())
        <livewire:conversations.conversation-message-own :message="$message" :key="rand() * $message->id" />
    @else
        <livewire:conversations.conversation-message :message="$message" :key="rand() * $message->id" />
    @endif
@endforeach