React-sweet-state状态更新后组件不重新渲染问题咨询

嘿，你的代码大部分逻辑都是对的——状态初始化、action定义、组件调用action的方式都没问题，问题出在你创建的hook默认没有订阅store的状态更新！

react-sweet-state的createHook方法默认情况下，subscribe选项是false，这意味着你的组件只会在挂载时获取一次初始状态，之后store里的状态发生变化，组件不会收到通知，自然不会重新渲染。

两种快速修复方案： #

方案1：创建hook时默认开启订阅

修改你的store导出hook的代码，添加subscribe: true配置：

export const useButtonsVisible = createHook(ButtonsVisibleStore, {
  subscribe: true
})

方案2：在组件使用hook时指定订阅

如果你不想让所有使用这个hook的组件都自动订阅，也可以在组件调用hook时单独配置：

const App = () => {
  // 这里添加subscribe配置
  const [state, actions] = useButtonsVisible({ subscribe: true })
  
  // 其余代码保持不变
  return (
    <Styled>
      <MainMenu />
      <div className="l-opacity">
        <WorldMap />
      </div>
      {state.startHolidayButton && (
        <div className="bottom-toolbar" onClick={() => {
          actions.setStartHolidayButton(false)
        }}>
          <StartSelectionButton />
        </div>
      )}
    </Styled>
  )
}

原理补充 #

当subscribe设为true时，hook会让组件订阅store的状态变化事件，一旦store里的状态通过action更新，组件就会收到通知并触发重渲染，这样你就能看到状态变化后的UI更新了。

你的action写法完全没问题，setState的用法也是react-sweet-state推荐的方式，只要开启订阅就能解决组件不重渲染的问题啦！

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