实时聊天没有正确响应

Question

我正在尝试直播，看看如何在我即将到来的项目中实现它。这个想法是简单的聊天(用户输入一个文本体，然后单击send，消息就会在聊天的底部)

到目前为止，一切都很好，直到我点击发送按钮。

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

​

下面是我单击“发送”之后发生的情况

​

​

我觉得问题就在代码的这一部分，我把消息发送到活线刀片。

  @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 (承诺) TypeError:不能读取空的属性‘数据’，但我认为它与聊天数据无关！

提前感谢

Answer 1

问题在于传递给会话消息组件的键。即使用ifs分隔，也会尝试呈现这些组件。您需要生成不同的键，比如字符串'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