Question

我正在尝试呈现一个接收异步数据的组件循环。它目前工作正常并正确呈现，除了呈现的第一个组件，其中评级组件未正确显示其值（仅显示 0 颗星）。

代码如下

        <Grid 
            container 
            item 
            direction="column" 
            alignContent="center" 
            className={reviewOpen ? '' : classes.closedReviewFormCardBlock}
        >
            {reviews && reviews.map((review) => (
                <ReviewCard review={review} userId={localStorage.getItem('userId')}/>
            ))}
        </Grid>

这里的评论是异步数据，它是一个包含评论信息的对象数组。

    const ReviewCard = ({review, userId}) => {
    ...
    return (
            ...
            <Grid item>
                <Rating defaultValue={review.rating} readOnly />
            </Grid>
            ...
            )
    }

在评级周围我有其他组件，它们使用作为道具传入的相同评论对象，它们也渲染得非常好。此外，当我控制台日志 review.rating 时，它包含正确的评分，但老实说我不知道为什么它不能正确显示。

Answer 1

您想使用 controlled 组件，但您没有使用。将其设置为 value 而不是 defaultValue。

我敢打赌，这就是您最终在获取评级之前第一次渲染组件，将它的 defaultValue 设置为 0 或类似的东西。然后再次渲染，但因为您使用的是带有 uncontrolled 的 defaultValue 组件，所以它不会在 prop 更改时更新。如果您只使用 value 而不是 defaultValue，我想一切都会好起来的。

当您指定 defaultValue 时 - 这意味着您正在使用所谓的 uncontrolled 组件 - 将设置初始值（因此为 defaultValue）但后续更新（甚至到 defaultValue }}) 什么都不做。

如果某处的状态更改有可能更新该值，那么您需要一个 controlled 组件 - 使用 value 而不是 defaultValue。< /p>

材料 UI 评级组件未显示正确值

1 个答案: