SolidJS - 如何使用外部依赖触发 createEffect？答案

【问题标题】：SolidJS - How to trigger createEffect using an external dependency?SolidJS - 如何使用外部依赖触发 createEffect？
【发布时间】：2022-12-21 16:49:21
【问题描述】：

有没有办法像 React 的 useEffect 依赖数组一样，使用外部依赖来触发 Solid 的 createEffect？

我想在 location.pathname 找零时打电话给 setShowMenu。

const location = useLocation()

createEffect(() => {
    console.log(location.pathname) // << external dependency
    setShowMenu(false)
})

在有更好的选择之前，我将使用它作为解决方法。

const location = useLocation()

createEffect(() => location.pathname && setShowMenu(false))

【问题讨论】：

标签： javascript reactjs typescript solid-js

【解决方案1】：

也许您正在寻找 on 助手？

createEffect(
  on(
    () => location.pathname,
    () => setShowMenu(false)
  )
);

https://www.solidjs.com/docs/latest/api#on

【讨论】：

【解决方案2】：

“外部依赖”一词并不是描述您正在尝试做的事情的准确术语，不幸的是它具有误导性。如果你查看文档，外部通常意味着其他反应库或商店，如 RxJS 和 Solid 提供 from 互操作性功能：

#from

一个帮助程序，可以更轻松地与外部生产者（如 RxJS 可观察对象）或 Svelte Stores 进行互操作。

现在，回答你的问题，与 React 组件不同，Solid 组件可以访问它们的外部范围。因此，信号不需要是组件或范围的本地信号即可触发其效果的重新运行。

Solid 中的组件用于组织您的代码，它们在初始运行后消失。您可以从任何模块导入任何信号并使用createComputed 或createEffect 等订阅其更改。因此遵循 JavaScript 的范围规则足以涵盖您的情况。

【讨论】：

感谢您提供更多信息。

【解决方案3】：

我认为您需要创建一个Signal。检查：https://www.solidjs.com/tutorial/introduction_effects#:~:text=An%20effect%20can%20be%20created,when%20any%20of%20them%20change.&text=Now%20clicking%20the%20button%20writes%20to%20the%20console。

“JSX 中的每个表达式都是它自己的效果，只要它的依赖信号发生变化就会重新执行”

我会尝试类似的东西：

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

function ShowMenuHandler() {
  const [showMenu, setShowMenu] = createSignal(false);
  createEffect(() => {
    console.log("The menu is shown", showMenu());
  });

  return <button onClick={() => setShowMenu(showMenu())}>Click Me</button>;
}

render(() => <ShowMenuHandler />, document.getElementById('app'));

【讨论】：

感谢您的回复，但是我已经创建了一个信号。我试图在 location.pathname 更改时调用信号，但不包括函数中的依赖项。