React如何渲染对象数组？Objects are not valid as a React child报错怎么解决

问题原因 #

• 核心错误点：在<OwlCarousel>组件内部直接写了{comments}语句，comments是由对象组成的数组，React不支持直接将普通对象作为可渲染的子元素，因此抛出了对应报错。
• 次要逻辑问题：你写的空状态判断!comments永远不会触发，因为空数组的布尔值为true，无法正确识别无评论的状态。

修复方案 #

直接替换你的<OwlCarousel>包裹的内部代码即可：

<OwlCarousel
  className="owl-carousel"
  id="testimonial-carousel"
  {...options}
>
  {comments.length === 0 ? (
    <div>non</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>
      );
    })
  )}
</OwlCarousel>

内容的提问来源于stack exchange，提问作者hyunwoo Lee