как я могу визуализировать массив объектов с помощью react

ProgramBox

как я могу визуализировать массив объектов с помощью react

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#node.js #reactjs

Вопрос:

я просмотрел все соответствующие сообщения за 8 часов, но все еще не могу решить эту проблему

 {comments.map((c) => {
                console.log(c)
                return(  
                  <div className="col-lg-12" key={c._id}>
                  <div className="testi-item">
                    <div className="testi-comment">
                      <p>
                        <i className="fa fa-quote-left" />
                        {c.message}
                        <i className="fa fa-quote-right" />
                      </p>
                      <ul className="stars list-unstyled">
                        <li>
                          <i className="fa fa-star" />
                        </li>
                        <li>
                          <i className="fa fa-star" />
                        </li>
                        <li>
                          <i className="fa fa-star" />
                        </li>
                        <li>
                          <i className="fa fa-star-half-alt" />
                        </li>
                        <li>
                          <i className="fa fa-star" />
                        </li>
                      </ul>
                    </div>
                    <div className="client-info">
                      
                      <h5>{c.companyName}</h5>
                      <p>{c.ip}</p>
                    </div>
                  </div>
                </div>

состояния

 const [comments, setComments] = useState([]);
 const getComments = async function () {
try {
  const response = await axios.get("/comment");
  console.log(response);
  setComments(response.data.comments);
} catch (error) {
  console.error(error);
}

};

объект smaple

{ companyName: "asd" ip: "112.214.38.68" message: "asd" _id: "6162fb4c06b4541fa2420f5c" }

введите описание изображения здесь

Неперехваченная ошибка: Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {_id, имя компании, сообщение, ip}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

пожалуйста, помогите

полный код

 import React, { useState } from "react";
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
import ScreenHeading from "../../utilities/ScreenHeading/ScreenHeading";
import ScrollService from "../../utilities/ScrollService";
import Animations from "../../utilities/Animations";
import "./Testimonial.css";
import shape from "../../../src/img/Testimonial/shape-bg.png";
import Comment from "../CommentComponent/Comment";
import axios from "axios";
import lady from "../../../src/img/Testimonial/lady.png";
import mike from "../../../src/img/Testimonial/mike.png";
import man from "../../../src/img/Testimonial/man.png";

export default function Testimonial(props) {
  const [comments, setComments] = useState([]);
  const getComments = async function () {
    try {
      const response = await axios.get("/comment");
      console.log(response);
      setComments(response.data.comments);
    } catch (error) {
      console.error(error);
    }
  };
  let fadeInScreenHandler = (screen) => {
    if (screen.fadeInScreen !== props.id) return;
    Animations.animations.fadeInScreen(props.id);
    getComments();
  };

  const fadeInSubscription =
    ScrollService.currentScreenFadeIn.subscribe(fadeInScreenHandler);

  const options = {
    loop: true,
    margin: 0,
    nav: true,
    animateIn: "bounceInRight",
    animateOut: "bounceOutRight",
    dots: true,
    autoplay: true,
    smartSpeed: 1000,
    responsive: {
      0: {
        items: 1,
      },
      768: {
        items: 1,
      },
      1000: {
        items: 3,
      },
    },
  };

  return (
    <div>
      <ScreenHeading title={"Valuable Comments"} subHeading={"방명록 리스트"} />
      <section className="testimonial-section fade-in" id={props.id || ""}>
        <div className="container">
          <div className="row">
            <OwlCarousel
              className="owl-carousel"
              id="testimonial-carousel"
              {...options}
            >
              {comments}
              {!comments ? (
                <div>non</div>
              ) : (
                <div>
                  {comments.map((c) => {
                    console.log(c)
                    return (
                      <div className="col-lg-12" key={c._id}>
                        <div className="testi-item">
                          <div className="testi-comment">
                            <p>
                              <i className="fa fa-quote-left" />
                              {c.message}
                              <i className="fa fa-quote-right" />
                            </p>
                            <ul className="stars list-unstyled">
                              <li>
                                <i className="fa fa-star" />
                              </li>
                              <li>
                                <i className="fa fa-star" />
                              </li>
                              <li>
                                <i className="fa fa-star" />
                              </li>
                              <li>
                                <i className="fa fa-star-half-alt" />
                              </li>
                              <li>
                                <i className="fa fa-star" />
                              </li>
                            </ul>
                          </div>
                          <div className="client-info">
                            <h5>{c.companyName}</h5>
                            <p>{c.ip}</p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </OwlCarousel>
          </div>
        </div>
      </section>
      <div className="footer-image">
        <img src={shape} alt="not responding" />
      </div>
    </div>
  );
}

1. удалите console.log(c) в своей карте массива. И можете ли вы предоставить нам образец данных для comments ?

2. только что добавлен образец формы данных

3. итак, образец объекта — это просто элемент comments массива, верно ?

4. да, позвольте мне загрузить результат console.log(c)

5. Похоже, то, как вы нанесли карту, в порядке. Не могли бы вы, пожалуйста, поместить полный код вместо фрагментов кода ? Тогда я смогу запустить его локально с поддельными данными.

Ответ №1:

Вы встроили голую {comments} функцию в свою функцию визуализации прямо перед троичным; comments является объектом и не может быть помещен в необработанный DOM, как указано в сообщении об ошибке.

Удалите эту линию, и все будет в порядке.

Ответ №2:

Проблема в том, что здесь:

 {comments}

Вам следует удалить эту строку.

Если вы хотите увидеть комментарии, которые вы должны сделать:

 {JSON.stringify(comments)}