MUI:组件在初始化后正在更改未控制评级的默认值状态

Question

问题出在哪里，为什么会出现这样的错误：MUI:组件在初始化后正在更改未控制评级的默认值状态。若要取消显示此警告，请选择使用受控评级。

const StarsRating = (props) => {
return (
<>
<Stack spacing={1}>
<Rating name="half-rating"
defaultValue={props.vote_average
? Math.round(props.vote_average / 2)
: 0}
sx={{
'& .MuiRating-iconFilled': {
color: '#544C21',
},
'& .MuiRating-iconFocus': {
color: 'orange',
},
'& .MuiRating-iconHover': {
color: 'green',
}
}}/>
</Stack>
</>
);
};

Answer 1

要修复控制台警告，需要将defaultValue切换为使用value。我也遇到了类似的问题，在这里找到了答案：https://www.reddit.com/r/reactjs/comments/8zuwek/warning_a_component_is_changing_an_uncontrolled/"如果提供了值道具，React将不会显示该警告"；。。。

所以如果你改变

<Rating name="half-rating"
defaultValue={props.vote_average
? Math.round(props.vote_average / 2)
: 0}
sx={{
'& .MuiRating-iconFilled': {
color: '#544C21',
},
'& .MuiRating-iconFocus': {
color: 'orange',
},
'& .MuiRating-iconHover': {
color: 'green',
}
}}/>

至

<Rating name="half-rating"
value={props.vote_average
? Math.round(props.vote_average / 2)
: 0}
sx={{
'& .MuiRating-iconFilled': {
color: '#544C21',
},
'& .MuiRating-iconFocus': {
color: 'orange',
},
'& .MuiRating-iconHover': {
color: 'green',
}
}}/>

错误就会消失。