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

【问题标题】：Material-UI: the value provided `undefined` is invalidMaterial-UI：提供的值“未定义”无效
【发布时间】：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 无法运行。它确实工作了一段时间，但是这个错误突然发生了，但我无法找到导致错误的原因。

【问题讨论】：

标签： reactjs material-ui

【解决方案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

【讨论】：

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