React使用MUI Typography更新状态时报children prop无效错误如何解决

问题原因 #

你在触发switchSys方法时传入的是对象而非字符串，sys状态被赋值为对象后，无法直接作为Typography组件的子元素渲染，才会触发该类型报错。

修复方案 #

任选一种修改方式即可：

• 方式1：修改点击事件的传参，去掉包裹text的花括号，直接传递字符串
  找到ListItem组件的onClick属性，修改为：

  onClick={()=>switchSys(text)}
  

• 方式2：修改switchSys方法的取值逻辑，从传入的对象中提取text字段
  修改switchSys方法为：

  const switchSys =(res)=>{
      console.log(res.text)
      setSys(res.text)
  }
  

修改完成后点击左侧菜单选项，顶部区域的内容就会同步更新，不再出现类型报错。

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