状态值在条件setState中被更新后一步

问题描述 投票:0回答:1

我正在实现滑块组件。当用户单击向左或向右箭头时,它将按给定scrollWidth更改滚动值。我对此实施有疑问:

const Slider = (props) => {
  const [scrollValue, setScrollValue] = useState(0)
  const [containerDimensions, setWidths] = useState({ offsetWidth: 0, scrollWidth: 0 })
  const [activeLeft, setActiveLeftArrow] = useState(false)
  const [activeRight, setActiveRightArrow] = useState(true)

...

  const checkArrowDisable = () => {
    containerDimensions.offsetWidth + scrollValue < containerDimensions.scrollWidth ? setActiveRightArrow(true) : setActiveRightArrow(false)
    scrollValue > 0 ? setActiveLeftArrow(true) : setActiveLeftArrow(false)
  }

  const scrollRight = () => {
    const scrollWidth = sliderItem.current.offsetWidth
    sliderContainer.current.scrollLeft += scrollWidth
    setScrollValue(scrollValue + scrollWidth)
    checkArrowDisable()
  }

  const scrollLeft = () => {
    const scrollWidth = sliderItem.current.offsetWidth
    sliderContainer.current.scrollLeft -= scrollWidth
    setScrollValue(scrollValue - scrollWidth)
    checkArrowDisable()
  }

checkArrowDisable中,将检查滚动和容器宽度值以隐藏/显示左右箭头。问题在于,使用此实现,activeLeftactiveRight的状态将在应有的状态下更新一个步骤。checkArrowDisable函数有什么问题?

javascript reactjs react-hooks conditional-operator
1个回答
0
投票

设置者不同步。因此,不应在相同的功能或子功能中使用假定的设定值。我的意思是:

  const scrollLeft = () => {
    const scrollWidth = sliderItem.current.offsetWidth
    sliderContainer.current.scrollLeft -= scrollWidth
    setScrollValue(scrollValue - scrollWidth) # scrollvalue not necessarily updated yet
    checkArrowDisable() # uses scrollvalue which is either updated or not
  }

我建议为scrollValue - scrollWidth使用变量并传递给checkArrowDisable函数

© www.soinside.com 2019 - 2024. All rights reserved.