MUI评分组件变更引发TextField读取length属性报错咨询

问题根源 #

你在Rating组件的onChange回调里更新状态时，直接用setContents({ rating: value })替换了整个contents对象，这会丢失原对象里的desc属性。当组件重新渲染时，contents.desc变成了undefined，TextField的error属性里访问contents.desc.length自然就会抛出“无法读取undefined的length属性”的错误。

修复方案 #

更新状态时要保留原有属性，有两种常用方式：

方式1：展开原状态对象，合并新属性

修改Rating的onChange回调，用对象展开运算符把原contents的属性都保留下来，再覆盖rating：

<Rating
    name="rating"
    defaultValue={contents.rating}
    precision={0.5}
    sx={{ scale: "1.2" }}
    onChange={(_, value) => {
        setContents({ ...contents, rating: value });
    }}
/>

方式2：使用函数式更新（更安全，尤其在依赖前一次状态时）

如果你的状态更新依赖前一次的状态值，推荐用函数式更新，确保拿到最新的状态：

<Rating
    name="rating"
    defaultValue={contents.rating}
    precision={0.5}
    sx={{ scale: "1.2" }}
    onChange={(_, value) => {
        setContents(prevContents => ({ ...prevContents, rating: value }));
    }}
/>

这样修改后，更新评分时会保留contents.desc的值，TextField的error属性就能正常访问length了。

内容的提问来源于stack exchange，提问作者Kaustubh Paturi