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。您需要使用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);

Answer 2

@ ravibagul91怎么说。 ForEach是无效函数，请检查this以获得详细信息

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

2 个答案: