Material-UI：提供的值“未定义”无效

Posted 2023-02-22

【中文标题】Material-UI：提供的值“未定义”无效

【英文标题】：Material-UI: the value provided `undefined` is invalid

【发布时间】：2018-09-21 19:13:48

【问题描述】：

我使用 Material ui 1.0.0-beta.35 中的 Tabs、Tab 和 Appbar 来显示一些带有从带有数据的对象。

我从 material-ui 收到此错误：

Warning: Material-UI: the value provided `undefined` is invalid

我可以在这个 codesandbox 中重现它（材料 ui 1.0.0-beta.38 但同样的错误）：

code example

点击“控制台”查看错误。 据我所知，我是否遵循了指导方针？ ：

https://material-ui-next.com/api/tabs/

https://material-ui-next.com/api/tab/

https://material-ui-next.com/api/app-bar/

在实际项目中，当我单击选项卡时，这会导致 appbar 无法运行。它确实工作了一段时间，但是这个错误突然发生了，但我无法找到导致错误的原因。

【参考方案1】：

使用Tabs 组件，您有责任在您的状态下维护选定的选项卡，这就是它所抱怨的未定义的value 属性。所以你需要做这样的事情：

class TabsContainer extends Component 
  state = 
    selectedTab: 'shop-setup'
  

  handleTabClick = (event, value) => 
    this.setState(selectedTab: value);
  
  ..
      <TabsContent
          tabs=tabData
          selectedTab=this.state.selectedTab
          onChange=this.handleTabClick
      />
  ..

然后将selectedTab 作为value 传递给Tabs：

const TabsContent = ( tabs, selectedTab, onChange ) => 
  ..
        <Tabs value=selectedTab onChange=onChange>
  ..
;

如果您不为每个Tab 提供value，则初始化会更容易，因此selectedTab 只是成为一个索引。

您还需要将RenderTab 定义从TabContent 中移除，因为它现在在每次渲染时都是新创建的，这将导致不必要的重新安装和可能的状态丢失。

更新：这是一个有效的sandbox

【讨论】：

巨大的帮助。即使只是你负责也是一个很好的线索。我以错误的方式使用标签。