Question

我在下面使用的按钮似乎滞后于top_n = 2 df <- df %>% group_by(year) %>% mutate(rank = min_rank(-value) * 1) %>% filter(rank <= top_n) %>% ungroup() ggplot(df, aes(y = ordering, x = value)) + geom_barh(stat = "identity", aes(fill = group)) + geom_text(aes(x= value, y = ordering, label = paste(group, " ")), vjust = 0.3, hjust = 1,color = 'white',size = 11) + transition_states(year, transition_length = 2, state_length = 0) + view_follow(fixed_y = TRUE)值。

selectedButtonIdx被称为toggleSelected时还不完整吗？

getClass

通过更改类别，每次onclick都会向用户显示该组中哪个按钮被单击。

Answer 1

看着这个，

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

Button是您的自定义组件，

这里要注意两件事，

您提供了onclick（c很小）的道具，在您的实际组件中应该是onClick={props.onclick}
您已使用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

Answer 2

从useState返回的函数setIdx是异步的，这意味着在您运行下一个函数时（可能是您猜到的），它可能尚未完成。

看看useEffect，它使您可以指定一个状态一旦更改的项就运行的函数，该方法将确保按正确的顺序调用函数。

Answer 3

到目前为止，我在这里没有发现任何问题。

工作原理：

发生初始渲染，onClick事件监听器已绑定
用户单击按钮，事件处理程序调用{{1}}触发新的渲染
新的渲染已启动，全新的setIdx用于渲染（也用于selectedButtonIdx调用）

请注意，没有理由担心getClass是同步功能还是异步功能。

如何确保状态在React钩子中不是陈旧的

3 个答案: