Почему значения извлекаются после того, как пост-запрос вышел из div?

Question

Последняя карта, которую вы видите, - это информация, полученная после почтового запроса на добавление отзыва из формы в базу данных json на сервере, и ее выход за пределы div.

Где, поскольку обзоры, вводимые вручную внутри json дБ, извлекаются и отображаются просто идеально, как вы можете видеть.

Может ли кто-нибудь помочь с этим? Я прилагаю свой код ниже.

---

RenderList. js - это код для отображения карт, которые вы видите ниже.

---

import React,{Fragment} from "react";
import { connect } from "react-redux";
import { Link } from 'react-router-dom';
import {getList, getReviews, calculateAverage} from '../../actions';
import { Button, Icon, Image, Item, Label, Rating, Modal, Header, Card } from 'semantic-ui-react';
import '../../styles.css';


class RenderList extends React.Component {

  componentDidMount(){

  }


  renderList() {
    const listReview = this.props.list;
    return (listReview || []).map(l => {
      if(this.props.starVal == undefined){

        return (
          <div class="ui card">
            <div class="content">
              <div class="header">{l.title}</div>
              <div style={{float:"right"}}>
                <Rating size="large" icon="star" disabled defaultRating={l.rating} maxRating={5}> </Rating>
              </div>
              <div style={{marginTop:"12px"}} class="meta"> by {l.name}</div>
              <div style={{marginTop:"12px"}} class="description">{l.review}</div>
            </div>
          </div>
        );
      }
       if(l.rating == this.props.starVal) {
        return (
          <div class="ui card">
            <div class="content">
              <div class="header">{l.title}</div>
              <div style={{float:"right"}}>
                <Rating size="large" icon="star" disabled defaultRating={l.rating} maxRating={5}> </Rating>
              </div>
              <div style={{marginTop:"12px"}} class="meta"> by {l.name}</div>
              <div style={{marginTop:"12px"}} class="description">{l.review}</div>
            </div>
          </div>
              );
      }
            });
            }

            render() {
              return (

                <div>
                  <div class="ui cards" style={{  overflow: "auto", maxHeight: "50vh", marginTop:"0px"}} >{this.renderList()}</div>
                </div>
              );
            }
            }

        const mapStateToProps = state => {
          return {
            list: Object.values(state.list),
            starVal: state.list.starValue

          };
};

export default connect(mapStateToProps, { getReviews, calculateAverage })(RenderList);

---

дБ. json - это json дБ, из которого извлекается значение.

---

{
  "reviews": [
    {
      "id": 1,
      "name": "Test User",
      "title": "Perfect",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 5
    },
    {
      "id": 2,
      "name": "Test User",
      "title": "Decent Product",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 4
    },
    {
      "id": 3,
      "name": "Test User",
      "title": "Easy Installation",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 4
    },
    {
      "id": 4,
      "name": "Test User",
      "title": "Not bad",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 3
    },
    {
      "id": 5,
      "name": "Test Userkjnkjnkjnkjnkjnkjnkjnkjnkjnkjnkjnk",
      "title": "Does the job",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 3
    },
    {
      "id": 6,
      "name": "Test User",
      "title": "Hey",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 3
    },
    {
      "id": 7,
      "name": "jknjknjnkjnkjnkjnkjnkjnkjnknjknkjnkjnkjnkjnkjnkjnkjnkjnkjnk",
      "title": "jnjnkjnkjnkjkn",
      "review": " n n n jn jhjhbhjbjnkjnjuhiubihbibbkjbnjknkjbjhbjkbkjbkjbkbkhbjbjkbkjbjkbkjbjbkjbjkbjkbjbjkbkjbjbkjbkjbjbkjb",
      "rating": 2
    }
  ],
  "stars": [
    {
      "id": 1,
      "one": 0
    },
    {
      "id": 2,
      "two": 2000
    },
    {
      "id": 3,
      "three": 0
    },
    {
      "id": 4,
      "four": 0
    },
    {
      "id": 5,
      "five": 0
    }
  ]
}

Пожалуйста, дайте мне знать, если вам нужен какой-либо другой фрагмент кода.

Answer 1

Это не относится к React, это css, если слова разделены, они будут go новой строкой, но если это длинное слово, вам нужно будет использовать word-wrap: break -word;

#test {
  width: 50px;
  padding: 10px;
  border: 1px solid #aaa;
  word-wrap: break-word; /* comment this line to see the difference */
}

<div id="test">
  asdlashsakjfhksdjhfksdhfgsdhfkghasdklfhaslfuqweopruf
</div>

Answer 2

Поскольку между ними нет пробела для разрыва строки.

Добавление word-wrap: break-word; к вашему CSS исправит это.

Answer 3

Это может происходить, потому что строка текста не имеет пробелов между символами и интерпретируется как целое слово. Попробуйте передать более форматированный текст или, если нет, вы можете использовать CSS свойство word-wrap: break-word;, как предложено выше.

Answer 4

Это не имеет никакого отношения к пост-запросу, нарушающему пользовательский интерфейс. Просто используемое слово очень длинное и уважается движком рендеринга браузера. Вы должны либо правильно сформулировать содержание рецензии, используя пробелы (не используя непрактичные длинные слова), либо вы можете использовать стиль css для ключевого слова, что на самом деле не рекомендуется. надеюсь, это поможет.