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添加到依赖项数组中，然后仅在该变量更新时运行。

反应状态（useState）不会随着获取的数据更新

1 个答案: