React组件render函数内对象遍历渲染Tab失效触发语法报错求助

• Line 76: Expected to return a value in function array-callback-return：你在渲染TabContainer的map方法回调中没有设置返回值，map作为数组迭代方法要求回调必须返回内容。
• Line 77: Expected an assignment or function call and instead saw an expression no-unused-expressions：你写的条件判断value === index && <TabContainer />生成的JSX没有被返回或赋值，属于未被使用的无效表达式。

调整第二段map的写法，明确返回符合条件的JSX元素，不匹配的项返回null即可，修复后的代码如下：

render() {
  const { classes,orderTabDataCollections } = this.props;
  const { value } = this.state;

  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          value={value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="scrollable"
          scrollButtons="auto"
        >
          {Object.keys(orderTabDataCollections).map(keyz =>
            <Tab key={keyz} label={keyz.toUpperCase()} />
          )}
        </Tabs>
      </AppBar>
      {
        Object.keys(this.props.orderTabDataCollections).map((keyz, index) => 
          value === index && (
            <TabContainer key={keyz} >
              <TweakDataForm key={keyz} tweakDataCollection={orderTabDataCollections[keyz]}/>
            </TabContainer>
          )
        )
      }
    </div>
  );
}

也可以选择显式return加三目运算符的写法：

Object.keys(this.props.orderTabDataCollections).map((keyz, index) => {
  return value === index ? (
    <TabContainer key={keyz} >
      <TweakDataForm key={keyz} tweakDataCollection={orderTabDataCollections[keyz]}/>
    </TabContainer>
  ) : null
})

内容的提问来源于stack exchange，提问作者Aaditya R Krishnan