我如何用反应渲染对象数组

Question

我已经查找了所有相关的帖子 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);
}

};

小对象

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

enter image description here

未捕获的错误：对象作为 React 子项无效（找到：对象键为 {_id、companyName、message、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>
  );
}

Answer 1

你已经在你的渲染函数中嵌入了一个裸露的{comments}，就在三元之前； comments 是一个对象，不能放入 DOM raw 中，就像错误消息告诉你的那样。

删除那行应该没问题。

Answer 2

问题就在这里：

{comments}

您应该删除此行。

如果你想看你应该做的cmets：

{JSON.stringify(comments)}