Javascript 通过道具禁用按钮将取消其onClick

TL；DR：转到并尝试单击其中一个按钮几次。小车还没到幻灯片的结尾

---

我正在制作一个水平滚动的幻灯片

它由一个容器和

溢出：自动

组成，其中包含一个水平溢出的轨迹。每一张幻灯片都是轨迹的子对象，与视口一样宽。容器有一个索引状态，表示视图中的幻灯片：

const slides = [/* some array of json data */]
const [index, setIndex] = useState(0)
const track = useRef(null)
const container = useRef(null)

return (
  <div ref={container} onScroll={onScroll}>
    <div ref={track}>
      {slides.map(() => (
        <div></div>
      ))}
    </div>
  </div>
)

还有一个

onClick

功能，允许用户自动滚动到下一张幻灯片：

const onClick = () => {
  track.current.children[index + 1].scrollIntoView({
    behavior: "smooth"
  })
}

此

onClick

被传递给按钮组件：

const BuggyButton = ({ disabled, onClick }) => (
  <button type="button" disabled={disabled} onClick={onClick}>
    click me
  </button>
)

constbuggybutton=（{disabled，onClick}）=>(
点击我
)

当用户到达最后一张幻灯片时，按钮将被禁用：

<BuggyButton onClick={onClick} disabled={index === slides.length - 1} />

问题：一旦

被禁用，

滚动视图就会停止（过早）这是为什么？

下面是一个在代码沙盒中完全复制和简化的问题：


如果您只是在寻找解决方案（而不了解正在发生的事情），代码沙盒中有一个运行良好的
组件。
总之，滚动会停止，因为状态会更改，组件会重新呈现

if (index !== newIndex) {
  setIndex(newIndex);
}

这与React在组件位于闭包内部和非闭包内部时如何处理对账有关，这就是为什么在应用程序函数内部和外部放置按钮时，React的行为会有所不同

你可以在这里阅读更多关于这方面的内容



只要把Buggy按钮放在里面就行了App@ludwiguer我希望了解为什么这是一个问题，而不是如何解决它。此外，在一个真正的代码库中，我将有一个更复杂的按钮组件，我不能只在另一个组件的
呈现
中声明。@ludwiguer然而，有趣的是，当在应用程序a中声明时，它可以工作nd不在外面。知道为什么吗？但是卷轴是在按钮的同级上，而不是按钮本身…按钮重新渲染怎么会对同级有副作用？
if (index !== newIndex) {
  setIndex(newIndex);
}