Material-UI 评级组件未正确更新星级

Question

我已经成功让Material UI 评级组件正常工作。但是，当我单击评级时，评级不会更新。

这是我到目前为止所拥有的。

const Product = props => {
const [rating, setRating] = useState(cumRating);

const updateRating = (newRating) => {
    setRating(newRating);
    console.log(rating);
}
return (
    <Rating
        value={rating}
        precision={0.5}
        max={5}
        name="hover-feedback"
        onChange={(event, newValue) => updateRating(newValue)}
        onChangeActive={(event, newHover) => {
            setHover(newHover);
        }}
    />
)

}

当我执行 console.log( rating) 时，它会打印出正确的评级，但不会更新星号 UI 组件。

然后我删除了评级中的名称属性，它起作用了。但我收到这个错误。有某种解决方法可以隐藏此错误吗？

为什么这个错误会不断出现？这个 name 属性到底有什么作用？我尝试将 readOnly 设置为 true，但我不再获得我想要的悬停效果。

Warning: Failed prop type: Material-UI: The prop `name` is required (when `readOnly` is false).
Additionally, the input name should be unique within the parent form.
    in ForwardRef(Rating) (created by WithStyles(ForwardRef(Rating)))
    in WithStyles(ForwardRef(Rating)) (at Product.js:86)
    in div (created by CardBody)
    in CardBody (at Product.js:82)
    in div (created by Card)
    in Card (at Product.js:65)
    in Product (at Products.js:104)
    in div (created by Row)
    in Row (at Products.js:189)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div
    in Motion
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div
    in t
    in r
    in r
    in Unknown
    in Unknown (created by Measure)
    in Measure
    in r (at Products.js:175)
    in div (at Products.js:174)
    in div (at Products.js:168)
    in Products (at Home/index.js:163)
    in div (at Home/index.js:160)
    in Home (at App.js:40)
    in main (at App.js:39)
    in div (at App.js:37)
    in App (at withExpoRoot.web.js:10)
    in ExpoRootComponent (at registerRootComponent.web.js:6)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer 

Answer 1

修改这个

<Rating
        value={rating}
        precision={0.5}
        max={5}
        name="hover-feedback"
        onChange={(event, newValue) => updateRating(newValue)}
        onChangeActive={(event, newHover) => {
            setHover(newHover);
        }}
    />

对此：

<Rating
        value={rating}
        precision={0.5}
        max={5}
        name="unique-rating"
        onChange={(event, newValue) => updateRating(newValue)}
        onChangeActive={(event, newHover) => {
            setHover(newHover);
        }}
    />

根据文档：

单选输入元素的名称属性。如果 readOnly 为 false，则需要该属性，此输入名称在父表单中应该是唯一的。

如果您有多个具有相同属性的组件，则可能会出现此问题name。