SOLIDJS：从InterSectionObserver回调中更新信号

Question

以下是来自Solid.js应用程序的代码段。我正在尝试从IntersectionObserver的回调中更新顶级信号的状态。该州正在在回调的范围内更新，但不在外部。

问题一：这怎么可能？如果我可以访问setIDS（）然后操纵值 - 什么会阻止此值更新在回调范围之外发生？

问题第二：有人知道我如何从回调内更新信号的状态吗？

const [ids, setIds] = createSignal(new Set<string>());

createEffect(() => {
    const callback = (entries: any, observer: any) => {
        const current = ids()
        entries.forEach((e: any) => {
            const intersecting = e.isIntersecting;
            const id = e.target.id;
            if (intersecting) {
                setIds(current.add(id));
            }
            else {
                setIds(current.remove(id));
            }
        });
        // NOTE: The following outputs the correct value
        console.log("This is the correct value:", ids())
    };
    const observer = new IntersectionObserver(callback);
    const elements = Array.from(document.querySelectorAll("p"));
    elements.forEach((element) => observer.observe(element));
    return () => observer.disconnect();
}, [setIds]);

// NOTE: The following does NOT update at all.
createEffect(() => console.log("This value is not being updated:", ids()));

以下是针对在现实世界中更喜欢测试事物的人：

我还提供了一个代码块，其中包含一个可用于测试的整个solid.js应用程序。该应用程序在自动滚动元素中提供了一个循环，其中最大高度为$ {n}像素 - 创建滚动效果。每个段落都带有（n？）唯一的ID。 我的目标是有一个不断的更新列表（存储在最高级信号中），我可以用来确定确切可见的ID。到目前为止，我一直在尝试使用<<代码> InterSectionObserver 包含回调。这在内部工作 回调但是，该值未在callback函数的外部更新外部。

import {
    For,
    createSignal,
    createEffect,
} from "solid-js";
import { render } from 'solid-js/web';

const App = () => {

    const [ids, setIds] = createSignal(new Set<string>());

    createEffect(() => {
        const callback = (entries: any, observer: any) => {
            const current = ids()
            entries.forEach((e: any) => {
                const intersecting = e.isIntersecting;
                const id = e.target.id;
                if (intersecting) {
                    setIds(current.add(id));
                }
                else {
                    setIds(current.remove(id));
                }
            });
            // NOTE: The following outputs the correct value
            console.log("This is the correct value:", ids())
        };
        let options = {
            root: document.getElementById("main"),
            threshold: 1.0
        }
        const observer = new IntersectionObserver(callback, options);
        const elements = Array.from(document.querySelectorAll("p"));
        elements.forEach((element) => observer.observe(element));
        return () => observer.disconnect();
    }, [setIds]);

    // NOTE: The following does NOT update at all.
    createEffect(() => console.log("This value is not being updated:", ids()));

    const arr = Array.from(Array(1000).keys())
    return (
        <div id="main" class="overflow-auto" style="max-height: 550px;">
            <For each={arr}>
                {(number) => {
                    return (
                        <p id={`${number}`}>
                            {number}
                        </p>
                    )
                }}
            </For>
        </div>
    );
};

render(() => <App />, document.getElementById('root') as HTMLElement);

Answer 1

信号不在乎他们所处的范围，无论是否效果，因此在十字路口观察者中是无关紧要的。

从创建返回的setter函数在预见和下一个值上运行身份检查，以避免不必要的更新。

在您的示例中，您没有设置一个新值，而是将其分配到变量中，将其突变并重新设置。由于集合是参考值，预见和下一个指向同一对象的值，因此ids（）===当前返回true，因此信号无法更新。

const [ids, setIds] = createSignal(new Set<string>());

 createEffect(() => {
   const current = ids();
   setIds(current); // Not a new value
 });

您需要传递新集合以触发更新：

const [ids, setIds] = createSignal<Set<string>>(new Set<string>());

createEffect(() => {
  console.log(ids());
});

let i = 0;
setInterval(() => {
  setIds(new Set([...ids(), String(i++)]));
}, 1000);

或者您可以通过传递{equals：false}来强制重新运行效果，即使没有触发更新：

const [ids, setIds] = createSignal(new Set<string>(), { equals: false });

现在始终调用效果：

createEffect(() => {
  console.log(ids());
});

let i = 0;
setInterval(() => {
  ids().add(String(i++));
  setIds(ids()); // Not a new value
}, 1000);