条件运算符在 render 方法中返回 undefined

Question

我在使用条件（三元）运算符的 react 渲染方法中添加了一些代码。问题是条件变为真，控件也进入块。但是当我打印值时，变量是 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，我实际上不知道为什么会这样。任何帮助表示赞赏。谢谢

Answer 1

forEach 除了 undefined 什么都不会 return。您需要使用 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);

条件运算符在 render 方法中返回 undefined

Conditional operator returning undefined in render method

ternary-operator

reactjs