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