React useState改变状态后,在useCallback中并不能拿到改变之后的状态。

Mesopotamia
  • 98

我想通过设置left和width来控制下方蓝色条的位置。
image.png
触发onClickHandler事件打印如下:
image.png

const SwitchTabPages = ({ defaultKey, onChange, datas }) => {
  const ulRef = useRef();
  const [inkBarWidth, setInkBarWidth] = useState('0px');
  const [inkBarLeft, setInkBarLeft] = useState('0px');

  useEffect(() => {
    setInkBarWidth('64px')
  }, [])

  const onClickHandler = (e, index) => {
    let lefts = [];
    let curWidth = 0;
    const event = e.nativeEvent.style
    const lis = ulRef.current.querySelectorAll('.li-item')

    for (let key of lis.keys()) {
      lefts.push({
        left: curWidth,
        width: lis[key].clientWidth,
      });
      curWidth += (lis[key].clientWidth + 32)
    }

    console.log('width设置成:', lefts[index].width + 'px', 'left设置成:', lefts[index].left + 'px')
    setInkBarWidth((lefts[index].width + 'px'))
    setInkBarLeft((lefts[index].left + 'px'))
  }

  const inkBarLine = useCallback(() => {
    console.log('width/left change', inkBarWidth, inkBarLeft)
    return (
      <div className="li-tabs-ink-bar" style={{ width: inkBarWidth, left: inkBarLeft }}></div>
    )
  }, [inkBarWidth, inkBarLeft])

  return (
    <div className="switch-tab-pages">
      <div className="switch-tabs">
        <ul
          style={{ transform: 'translate(0px, 0px)' }}
          ref={ulRef}
        >
          {datas.map(item => (
            <li className="li-item" key={item.key} onClick={(e) => onClickHandler(e, item.key)}>
              <Link to={item.toPath || ''}>{item.label}</Link>
            </li>
          ))}
          {
            inkBarLine()
          }
        </ul>
      </div>
      <div className="page-content">
        <Route path="/agentManage/detail/baseData" exact component={BaseData} ></Route>
        <Route path="/agentManage/detail/bills" exact component={Bills} ></Route>
      </div>
    </div>
  )
}

export default SwitchTabPages
回复
阅读 1.7k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏