Question

我正在使用NextJS，并将在列中显示我的字符室用户列表。通过发出一个事件，当新用户进入时允许更新我的组件，在所有用户都连接后检索此列表。用户存储在组件状态下的一系列对象中。

我尝试过flexbox，但失败了。但是，在我看来，一切都很好，我也将其添加到codesandbox.io上，我的代码运行良好。

因此，我认为这是由于我的./reset.css而引起的，但是如果我删除它，它什么也不会改变。即使通过显式添加<br/>元素，我也尝试使用CSS和JS代码，但是大声笑，即使<br/>也无法引起新的反响。

所以我假设“嘿，也许是开发模式”，我运行yarn build来构建我的下一个应用程序，然后运行yarn start来启动生产模式，真棒！不，那已经下降了。

我假设“我正在运行，这是与NextJS的服务器连接，导致某些棘手的行为”，我关闭了socket.io，在注释中关闭componentDidMount，然后从头开始设置一个数组以欣赏变化：甚至更糟。

好吧，我选择了“同伴帮助”选项，也许这里的某人知道发生了什么事？

有趣的提示，似乎我的应用程序渲染了整个组件而不是更新组件：

这是我的snippet.js：

renderRoomUser=(data)=>{         
        return this.state.roomUserStock.map((roomUserItem, index) => {
            console.log("renderRoomUser roomUserItem: ", roomUserItem) 
            return (
                <li
                className={style.room_user_item}
                key={index}> 

                {roomUserItem} 

                </li>
        )})

    }

    render() {
        return (
        <div className={style.page}> 

            <div
                className={style.room_user_container} 
            >
                <h2>People</h2>
                <ul className={style.room_user_list}> {this.renderRoomUser()} </ul>
            </div>

这是我的css.snipet：

.page{ 
    width: 100vw;
    height: 100%; 
    min-height: 100vh;
    background: rgb(253, 108, 217);  
      /* display: flex;
    flex-direction: column;
    justify-content: center; */
    display:grid;
    grid-template-areas: 
        "room_user message_area";
    grid-template-columns: 25vw 5fr; 

}




/**** room aera ****/ 

.room_user_container{ 
    width: 100%;
    height: 100%;
    grid-area:room_user;
    background:rgb(228, 104, 104);
    display:flex; 
    flex-direction: column;
    align-items: center; 
}

.room_user_container h2{ 

    font-weight:bold;
    justify-self: flex-start;
    margin: 5vh 0;
}

.room_user_container ul{
    background:rgb(96, 255, 130);
    height: 100%;
    width: 100%;
    color: green;
    display:flex; 
    flex-direction: column;
    flex-wrap: wrap; 
    align-items: center; 
    margin-bottom: 5vh;
} 

.room_user_container ul li{ 
    background:rgb(96, 205, 255);
    height: 100%; // auto rather than 100% for example, would yeild better rendering
    width: 100%;
    display:inline-block;

}

任何提示都会很棒，谢谢

NextJS-socket.io-CSS _ Flexbox：我的flexbox列无法创建聊天室的用户列表中的列

0 个答案: