solid.js：如何将UseContext放入来自外部事件的提供商中

Question

const CounterContext = createContext();

export function CounterProvider(props) {
  const [count, setCount] = createSignal(0),
    store = [
      count
    ];

  return (
    <CounterContext.Provider value={store}>
      {props.children}
    </CounterContext.Provider>
  );
}

export function useCounter() { return useContext(CounterContext); }

在提供商之外，我想在提供商之外使用此usecounter，例如settimeout 或传入的websocket消息。

setTimeout(() => {
  const [count] = useCounter();
  createEffect(on(count, () => {
    console.log(count)
  }))
})

这似乎是一个坏主意，但是我在应用程序代码中有这个，我不知道如何重组我的代码以避免这种情况。

Answer 1

您可以使用runwithowner运行异步代码以访问组件的上下文。

  // get component's owner
  const owner = getOwner();

  setTimeout(() => {
    // timeout happens after the owner has been assigned to null

    // in runWithOwner you have access to that owner's context
    runWithOwner(owner, () => {
      console.log(useContext(CounterContext));
    });
  });

用runwithowner将其包裹起来还使其与组件旁边的处置中创建的计算 - 如果您在根外创建计算，则永远不会被处置。

Playground link: https://playground.solidjs.com/?hash=1366672288& ;版本= 1.3.16

Answer 2

通常，如果可能的话，我会考虑在提供商下或在受保护的主要渲染下的效果下获取usecontext呼叫。是的，您可以使用更高级的API，例如Runwithowner，但是如果您无法做到这一点，则可能会导致其他麻烦。

通常，修复程序涉及创建一个信号，该信号可以同步您想要的动态行为，然后通过从超时设置信号来触发它。