0

当更新不同的元素时，我遇到了update()调用钩子函数的问题。我的 LiveView 进程从其他进程接收到两条不同的消息，并且两个事件处理程序更新了两个不同的分配，但是这两个更新都调用了挂钩，即使只有一个更新会影响带有挂钩的元素。我猜这是因为在分配更改时重新渲染了整个 LiveView。我希望挂钩仅在挂钩所绑定的元素发生更改时触发。

我将如何解决这个问题？

我正在使用phoenix 1.5.9和phoenix_live_view 0.15.1。

下面我制作了一个类似于我的用例的最小代码示例：

实时取景

defmodule DoubleUpdateWeb.PageLive do
  use DoubleUpdateWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    Process.send_after(self(), {:loop1, 0}, 1000)
    Process.send_after(self(), {:loop2, 0}, 1500)

    {:ok, socket, temporary_assigns: [log1: [], log2: []]}
  end

  @impl true
  def handle_info({:loop1, id}, socket) do
    Process.send_after(self(), {:loop1, id + 1}, 1000)
    socket = assign(socket, log1: [{id, "log1"}])

    {:noreply, socket}
  end

  @impl true
  def handle_info({:loop2, id}, socket) do
    Process.send_after(self(), {:loop2, id + 1}, 1000)
    socket = assign(socket, log2: [{id, "log2"}])

    {:noreply, socket}
  end
end

模板

<div id="log1" phx-update="append" phx-hook="TestHook">
  <%= for {id, msg} <- @log1 do %>
    <p id="log1-<%= id %>"><%= msg %></p>
  <% end %>
</div>

<div id="log2" phx-update="append">
  <%= for {id, msg} <- @log2 do %>
    <p id="log2-<%= id %>"><%= msg %></p>
  <% end %>
</div>

钩

this.el在控制台中打印了两次，但我希望它只打印一次，因为它只附加到divwithid="log1"

Hooks.TestHook = {
  updated() {
    console.log(this.el);
  },
};

谢谢

4

0 回答 0