时间戳

首页 > 解决方案 > 获取错误对象作为 React 子对象无效

reactjs - 获取错误对象作为 React 子对象无效

问题描述

我正在学习 react.js。我正在运行 App.js，但出现错误：- × 错误：对象作为 React 子项无效（找到：带有键 {blogCards} 的对象）。如果您打算渲染一组孩子，请改用数组

谁能告诉我为什么会出现这个错误，因为我是 react.js 的新手

import logo from './logo.svg';
import './App.css';
import React from 'react';

function App() {
  const blogArr = [
    {
    id : 1,
    title: 'Blog Title 1',
    description : 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor'
  },
  {
    id : 2,
    title: 'Blog Title 2',
    description : 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor'
  },
  {
    id : 3,
    title: 'Blog Title 3',
    description : 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor'
  }]
  
  const blogCards = blogArr.map((item,pos) => {
    console.log(item)
    
    return (
      <div className="BlogCard" key={pos}>
        <h3>{item.title}</h3>
        <p>{item.description}</p>
      </div>
        
    );
  })

   return (
    <div className="App">
      {
        {blogCards}
      }
    </div>
  );

}



export default App;

标签： reactjs

解决方案

正如@zsolt-meszaros 在评论中提到的那样，问题在于这段代码：

    <div className="App">
      {
        {blogCards}
      }
    </div>

各自行上的大括号离开 JSX 模式并进入 JavaScript 模式。在 JavaScript 中，{blogCards}等价于{"blogCards": blogCards}，即创建一个具有一个属性的对象，其键"blogCards"和值等于blogCards变量。因此 React 得到一个对象并抱怨。

您只需将代码更改为：

    <div className="App">
      {blogCards}
    </div>

推荐阅读