javascript - 为什么在 post 请求超出 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);

<小时/>

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

因为它之间没有空格来换行。

在 CSS 中添加 word-wrap:break-word; 即可解决此问题。