React useState 更新不是重新渲染组件

Posted 2023-02-22

【中文标题】React useState 更新不是重新渲染组件

【英文标题】：React useState update is not re-rendering component

【发布时间】：2021-03-10 15:09:26

【问题描述】：

我想重新渲染使用父组件状态作为道具的子组件。

我的场景： 并使用 react-slick 滑块在页面上显示图像，它有一个道具初始幻灯片，用于说明哪个滑块显示初始幻灯片。 我正在使用 useState() 来维护 initialSlide 值，页面上有另一个触发器更新了 initialSlide 值，当我更新 initialSlide 值时它不会重新渲染 react-slider。

请查看下面的演示代码： Demo

在上面的演示中，点击按钮> currentSlide 值更新> react-slider 不更新。

有没有办法在反应中实现这一点，我尝试使用 redux 存储但子组件永远不会重新渲染。

【参考方案1】：

您可以使用sliderNext 和sliderPrev 方法。同样要使用它们，您应该通过useRef 钩子获得对滑块的引用。

使用该方法的示例：https://react-slick.neostack.com/docs/example/previous-next-methods/

工作滑块：https://stackblitz.com/edit/react-bwfh5g

【讨论】：

嗨 RukkiesMan，感谢您的回答。如果我使用更改幻灯片按钮转到下一张幻灯片，您给出的解决方案将起作用。如果我想从幻灯片 1 转到幻灯片 4，该怎么办？在那种情况下，我不能使用 slickPrev() 和 slickNext()。

嗨，我有另一种方法来解决我的问题：slickGoTo()，这会起作用。非常感谢！

酷！很高兴您找到了解决方案