Context.Consumer 源值 map 未呈现任何元素

Question

我正在尝试呈现从Context.Consumer收集的一系列消息。

我的实现如下：

class UserChat extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Box display="flex" flexDirection="column">
        <span>test nessages</span>
        <sessionContext.Consumer>
          {(session) => {
            session.chat.lastMessages.map((message) => {
              console.log(message);
              return <span key={message.id}>{message.text}</span>;
            });
          }}
        </sessionContext.Consumer>
      </Box>
    );
  }
}

export default withStyles(useStyles)(UserChat);

问题是除了测试消息之外没有任何消息被呈现。

console.log(message)输出以下内容：

{userName: "User1", avatar: "", id: 12355435435, text: "Test message"}
{userName: "User2", avatar: "", id: 210394240, text: "Test message 2"}

React Devtools 得到了正确的评价：

元素树缺少跨度元素：

Answer 1

您忘记返回映射的 JSX。

class UserChat extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Box display="flex" flexDirection="column">
        <span>test nessages</span>
        <sessionContext.Consumer>
          {(session) => {
            return session.chat.lastMessages.map((message) => {
              console.log(message);
              return <span key={message.id}>{message.text}</span>;
            });
          }}
        </sessionContext.Consumer>
      </Box>
    );
  }
}

export default withStyles(useStyles)(UserChat);