如何确保 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是同步函数还是异步函数。