React 状态 (useState) 不会使用获取的数据进行更新

Question

背景
我有一个星级评定系统。当用户已经对内容进行了评级时，我希望他们能够在加载页面时看到他们以前的评级。

我可以为用户获取评级数据，并且我已经为星级设置了初始状态，以防还没有任何评级。

目标
目标是设置值为0的星级评定的初始状态。当获取以前存储的评级值时，我希望初始状态值更新为获取的评级值。

问题
当前，当页面加载时，星级评定值会显示为undefined，即使存储的评定值已提取并显示在我的控制台中。我很确定这是因为变量在数据查询完成之前就被调用了。不幸的是，它在完成时不会更新。

代码

在下面的代码中，articleRating是提取的评级值

// data query
const {
data: { feedback, id: feedbackId, rating: articleRating },
status: feedbackStatus,
} = useGetFeedback(slug as string, "lesson")
// setting initial state for star rating
const [starsSelected, selectStar] = useState(0)
// Updating the rating value to show previously stored rating
useEffect(() => {
if (articleRating !== null || articleRating !== "undefined") {
console.log("rating value: ", articleRating)
selectStar(articleRating)
}
}, [])

在上面的代码中，我使用了useEffect钩子，因为我收到一条错误消息，说没有它就有无限的渲染，并且页面会中断。

提前感谢您的建议！✌️

Answer 1

您的useEffect仅在第一次渲染时运行，您应该在第二个参数中将articleRating添加到依赖数组中，然后它将仅在该变量更新时运行。