使用 useLocalStorage 时，本地状态不会重新渲染组件

Question

我有以下组件

const showMoreDom = (text, onClick) => {
  return (
    <div>
      {text}
      <span className='anchor' onClick={onClick}>
        {' '}
        show more{' '}
      </span>
    </div>
  )
}

const showLessDom = (text, onClick) => {
  return (
    <div>
      {text}
      <span className='anchor' onClick={onClick}>
        {' '}
        show less{' '}
      </span>
    </div>
  )
}

export const ReadMore: React.FunctionComponent<IReadMore> = ({ comment }) => {
  const state = useLocalStore(() => ({
    isShowLess: false,
    handleShowLess: () => {
      state.isShowLess = false
    },
    handleShowMore: () => {
      state.isShowLess = true
    }
  }))
  const text = comment || ''
  const maxLength = MAX_LENGTH
  const textLength = text.length
  if (textLength > maxLength && !state.isShowLess) {
    const clippedText = text.slice(0, 14) + '...'
    return showMoreDom(clippedText, state.handleShowMore)
  }
  if (state.isShowLess) {
    const overflownText = text
    return showLessDom(overflownText, state.handleShowLess)
  }
  return <Typography className={classNames({})}>{text}</Typography>
}

在这里，我试图展示越来越少的功能。 在这个组件中，当我点击显示更多然后它函数被调用 onclick 但之后不会发生重新渲染。 因此，返回的 div 不会被渲染。

任何人都可以帮我解决这个问题吗？

Answer 1

您需要使用observer装饰器（或 HOC，无论您想怎么称呼它）来包装您的组件。

import { observer } from "mobx-react"

const ReadMore = observer(({ comment }) => {
    const state = useLocalStore(() => ({

    // Your other code here
})

基本上每次在组件内部使用 observable 时，您都需要这样做，以便组件可以对observable变化做出反应。

更多信息在这里https://mobx.js.org/refguide/observer-component.html#using-context-to-pass-observables-around