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

Question

我想通过设置left和width来控制下方蓝色条的位置。

触发onClickHandler事件打印如下：

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

Answer 1

并没有复现你所说的问题，你的代码没问题
https://codesandbox.io/s/late...