如何调试为什么我的聊天室没有出现在 React-Bootstrap 中？

Question

我真的已经尝试了所有我能想到的解决方案，代码似乎没问题。它没有给我任何错误或问题迹象。

Objective - 显示所有可用的聊天室

问题 - 聊天室没有出现，在源代码中 <GroupList> div 是空的，所以没有数据传入..

这是我的代码

import React from 'react';
import { ListGroup } from 'react-bootstrap';

function Sidebar() {
    const rooms = ["1st Room", "2nd Room"];
  return (
        <>
        <h2>Available Chat Rooms</h2>
        <ListGroup >
        {rooms.map((room, idx) => {
                <ListGroup.Item key={idx}>
                    {room}
                </ListGroup.Item>
            })}
            </ListGroup>
        </>
  );
}
export default Sidebar

const rooms = ["1st Room", "2nd Room"]; IS NOT PASSING INTO THE GROUP LIST.

我也试过下面的代码

import React from 'react';
import { ListGroup } from 'react-bootstrap';

function Sidebar() {
    const rooms = ["1st Room", "2nd Room"];
  return (
        <>
        <h2>Available Chat Rooms</h2>
        {rooms.map((room, idx) => {
                    <ListGroup key={idx}>
                <ListGroup.Item >
                    {room}
                </ListGroup.Item>
            </ListGroup>
            })}
        </>
  );
}
export default Sidebar

两者都没有提供任何错误，所以我不知道从哪里开始或要寻找什么。我已阅读 React-Bootstrap 文档但无济于事。

Answer 1

或者：

{rooms.map((room, idx) => { // With curly braces, we have to return explicitly
               return ( 
                   <ListGroup.Item key={idx}>
                   {room}
                   </ListGroup.Item> 
               )
})}

或者：

{rooms.map((room, idx) => ( // implicit "return"
                   <ListGroup.Item key={idx}>
                   {room}
                   </ListGroup.Item> 
               )
)}

更多信息： Arrow functions, the basics

Answer 2

当您使用“{}”时，在其中添加一个“return”。当您使用“()”时，直接输入元素即可。

使用“()”的示例

{rooms.map((item,idx)=> (
      <ListGroup.Item key={idx}>
        {item}
      </ListGroup.Item> 
) 
)};

使用“{}”的示例

{rooms.map((item,idx)=> {
  return (
          <ListGroup.Item key={idx}>
            {item}
            </ListGroup.Item> 
  )
})

如何调试为什么我的聊天室没有出现在 React-Bootstrap 中？

How to debug why my chatrooms are not appearing in React-Bootstrap?

reactjs

react-bootstrap