反应组件渲染中的对象迭代不起作用[关闭]答案

【问题标题】：Object iteration in react component render is not working [closed]反应组件渲染中的对象迭代不起作用[关闭]
【发布时间】：2021-12-11 11:48:16
【问题描述】：

首先，我想告诉您，React 开发非常新。当我尝试使用迭代渲染选项卡时，出现以下错误。有人可以帮我确定为什么这不起作用。语法有错吗
#实现

  Line 76:  Expected to return a value in function                                 array-callback-return
  Line 77:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

  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(function(keyz, index) {
        value === index && <TabContainer key={keyz} >
          <TweakDataForm key={keyz} tweakDataCollection={orderTabDataCollections[keyz]}/></TabContainer>  })}      
      </div>
    );
  }

【问题讨论】：

"预期 return 一个值" 对我来说似乎很清楚 - 你的 map 回调没有 return 任何东西！请注意，只有箭头函数具有简洁的正文语法隐式返回。
同意Bergi，投票结束为“不可复制或由错字引起”。干杯。

标签： javascript reactjs object iterator react-component

【解决方案1】：

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

map 如果回调函数被传递，应该从它的回调中返回一些值。像上面一样更新 map 包装 TabContainer 的代码应该修复 Line 76: Expected to return a value in function 错误。

map

【讨论】：

它还将修复第 77 行的警告