javascript - Context.Consumer 源值映射不渲染任何元素

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);