使用 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

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

Local state does not re-render the component when using useLocalStorage

javascript

reactjs

mobx

mobx-react

react-hooks