NextJS - socket.io - CSS _ Flexbox: столбцу моей flexbox не удается создать столбец списка пользователей моей комнаты чата - PullRequest
Новая
       15

NextJS - socket.io - CSS _ Flexbox: столбцу моей flexbox не удается создать столбец списка пользователей моей комнаты чата

0 голосов
/ 23 февраля 2019

Я работаю с NextJS и отображаю список пользователей моей комнаты в столбце.Этот список восстанавливается после того, как все пользователи подключились, отправляя событие, которое позволяет обновить мой компонент при входе нового пользователя.Пользователь хранится в массиве объектов в состоянии моего компонента.

Я попробовал flexbox, но потерпел неудачу.Однако мне кажется, что все хорошо, и я бы добавил, что на codeandbox.io мой код работает хорошо.

Итак, я предположил, что это из-за моего ./reset.css, но ничего не изменится, если я его уберу.Я попытался поиграть с моими кодами CSS и JS, даже явно добавив элемент <br/>, но, даже, <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.фрагмент: 

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

}

Любая подсказка была бы отличной, спасибо

...