为什么在 post 请求离开 div 之后检索值？

Question

您看到的最后一张卡片是在 post 请求将评论从表单添加到 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);

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

因为它之间没有 space 换行符。

将 word-wrap: break-word; 添加到您的 CSS 将解决这个问题。

Answer 2

与React无关，是css，如果单词分开会换行，但如果是长单词，则需要使用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 3

它与 post 打破 UI 的请求无关。只是被使用的词很长，被浏览器渲染引擎所推崇。您应该使用空格（而不是使用不切实际的长词）正确地制定评论内容，或者您可以使用 css 样式作为断词，这实际上是不推荐的。希望对你有帮助。

Answer 4

发生这种情况的原因可能是文本字符串的字符之间没有空格，并且已被解释为一个完整的单词。尝试传递格式更明确的文本，否则您可以按照上面的建议使用 CSS 属性 word-wrap: break-word;。

为什么在 post 请求离开 div 之后检索值？

Why are values being retrieved after post request going out of div?

javascript

reactjs

redux

react-redux

semantic-ui-react