javascript - 如何确保 React 钩子(Hook)中的状态不陈旧

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 很小) Prop ，在您的实际组件中它应该是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>
}

Demo