Solid-JS：事件处理器中Props无响应的问题咨询

核心问题分析 #

1. Context调用时机错误：App组件是StoreContext.Provider的父组件，在App的组件函数中调用useStoreContext()时，Provider还未完成渲染，useContext返回undefined，导致传给TestComp的count始终是undefined。
2. SolidJS组件执行特性：组件函数仅在初始化时执行一次，JSX中的表达式不会自动重新求值，除非处于响应式依赖的追踪范围内。
3. 全局状态设计问题：原代码将createStore定义在组件外部，形成全局状态，不符合Context绑定组件树局部状态的设计意图。

修正后的代码 #

import { Component, createContext, useContext, JSX } from 'solid-js'
import { createStore, Store, SetStoreFunction } from 'solid-js/store'

interface ContextProps {
  state: Store<{ count: number }>,
  setState: SetStoreFunction<{ count: number }>
}

const StoreContext = createContext<ContextProps>()
const useStoreContext = () => useContext(StoreContext)

interface StoreProviderPropsType {
  children: JSX.Element
}

export const StoreProvider = (props: StoreProviderPropsType) => {
  // 将状态创建移至Provider内部，确保状态与Provider实例绑定
  const [state, setState] = createStore({ count: 0 })
  return (
    <StoreContext.Provider value={{ state, setState }}>
      {props.children}
    </StoreContext.Provider>
  )
}

const TestComp: Component<{ count: number }> = (props) => {
  return (
    <button onClick={() => window.alert(props.count)}>Show</button>
  )
}

// 抽离Provider的子组件，确保在Context作用域内调用useStoreContext
const AppContent: Component = () => {
  const { state, setState } = useStoreContext()!
  return (
    <div>
      <TestComp count={state.count} />
      <button onClick={() => setState('count', state.count + 1)}>Increment</button>
    </div>
  )
}

const App: Component = () => {
  return (
    <StoreProvider>
      <AppContent />
    </StoreProvider>
  )
}

export default App

修正说明 #

1. 状态与Provider绑定：将createStore移至StoreProvider内部，每个Provider实例拥有独立状态，避免全局共享的意外问题。
2. 正确的Context调用范围：将业务内容抽离为AppContent组件，作为StoreContext.Provider的子组件，此时调用useStoreContext()能正确获取到Context值。
3. 自动响应式追踪：SolidJS会自动追踪state.count的依赖，当状态更新时，TestComp的count属性会同步最新值，无需额外使用createMemo。

内容的提问来源于stack exchange，提问作者Franck Dervaux