在渲染方法中返回未定义的条件运算符答案

【问题标题】：Conditional operator returning undefined in render method在渲染方法中返回未定义的条件运算符
【发布时间】：2019-08-19 05:30:16
【问题描述】：

我在使用条件（三元）运算符的反应渲染方法中添加了一些代码。问题是条件被渲染为真，控制也进入了块。但是当我打印值时，变量是undefined

我尝试在块内插入警报以检查控件是否遍历块并且它起作用了。

const comments =
      details.comments_count >= 1
        ? Object.keys(details.comments_list).forEach(keys => {           
            return (
              <ListItem
                alignItems="flex-start"
                key={details.comments_list[keys].aid}
              >
                <ListItemAvatar>
                  <Avatar>{details.comments_list[keys].aname.charAt(0)}</Avatar>
                </ListItemAvatar>
                <Card style={useStyles.card}>
                  <CardContent>
                    <ListItemText
                      primary={details.comments_list[keys].aname}
                      secondary={details.comments_list[keys].content}
                    />
                  </CardContent>
                </Card>
              </ListItem>
            );
          })
        : null;

console.log(comments);
//=>undefined

我实际上不知道为什么会这样，因为条件表达式的结果是true。任何帮助表示赞赏。谢谢。

【问题讨论】：

Array.prototype.forEach 返回undefined。所以你得到的正是你所实施的。

标签： reactjs ternary-operator

【解决方案1】：

forEach 除了undefined 不会返回任何内容。您需要使用map。

const comments =
      details.comments_count >= 1
        ? Object.keys(details.comments_list).map(keys => {           
            return (
              <ListItem
                alignItems="flex-start"
                key={details.comments_list[keys].aid}
              >
                <ListItemAvatar>
                  <Avatar>{details.comments_list[keys].aname.charAt(0)}</Avatar>
                </ListItemAvatar>
                <Card style={useStyles.card}>
                  <CardContent>
                    <ListItemText
                      primary={details.comments_list[keys].aname}
                      secondary={details.comments_list[keys].content}
                    />
                  </CardContent>
                </Card>
              </ListItem>
            );
          })
        : null;

console.log(comments);

【讨论】：

工作就像一个魅力，从来不知道forEach返回undefined。谢谢@ravibagul91