如何確保 React 鈎子中的狀態不陳舊

Question

我在下面創建的按鈕似乎滯后於selectedButtonIdx值。

調用getClass ， toggleSelected是否未完成？

function ButtonGroup(props) {
    const [selectedButtonIdx,setIdx]=useState(props.loadCurrentAsIndex);

    const toggleSelected = (e) => {
        setIdx(parseInt(e.target.dataset.index));
        props.onclick(e);
    };

    const getClass = (index) => {
        return (selectedButtonIdx === index) ? classnames('current', props.btnClass)
            : classnames(props.btnClass)
    };

    let buttons = props.buttons.map((b, idx) => <Button key={idx} value={b.value} index={idx} text={b.text}
                                                        onclick={e => toggleSelected(e)}
                                                        btnClass={getClass(idx)}/>);

    return (
        <div>
            {buttons}
        </div>
    );
}

每次點擊都希望通過更改其類來向用戶顯示組中的哪個按鈕被點擊。

Answer 1

通過看這個，

<Button 
  key={idx} 
  value={b.value} 
  index={idx} 
  text={b.text}
  onclick={e => toggleSelected(e)}
  btnClass={getClass(idx)}
/>

Button是您的自定義組件，

這里要注意兩點，

1. 您已經提供了onclick （ c很小）道具，在您的實際組件中它應該是onClick={props.onclick}
2. 您已經使用了e.target.dataset.index ，要處理dataset我們應該具有帶有data-前綴的屬性。 所以你的index應該是你實際組件中的data-index 。

所以最后你的Button組件應該是，

const Button = (props) => {
  return <button text={props.text} data-index={props.index} onClick={props.onclick} className={props.btnClass}>{props.value}</button>
}

演示

Answer 2

從 useState 返回的函數 setIdx 是異步的，這意味着它可能在您運行下一個函數時尚未完成（如您所料）。

看看useEffect它允許你指定一個函數，一旦你狀態中的一個項目發生變化，這個方法將確保你的函數以正確的順序被調用。

Answer 3

到現在為止，我沒有發現這里有任何問題。

這個怎么運作：

1. 初始渲染發生， onClick事件偵聽器已綁定
2. 用戶單擊按鈕，事件處理程序調用setIdx觸發新渲染
3. 新的渲染被啟動，全新的selectedButtonIdx用於渲染（以及getClass調用）

看，沒有理由擔心setIdx是同步函數還是異步函數。