reactjs - 错误消息：如果您打算渲染一组子项，请使用数组而不是 React JS

Question

我的项目有问题。一切正常，直到我将导航栏组件添加到技能中，然后我收到以下错误消息。一旦我从技能组件中删除导航栏，一切都运行得很好。

错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染一组孩子，请改用数组

有人可以告诉我我做错了什么吗？

狮子座

技能部分

import { data } from '../../SkillData';
import SkillsList from "./SkillsList";
import Header from './Header';
import Navbar from './Navbar';
function Speakers () {
    return (
        <>
        <Navbar />
        <Header />
        <SkillsList data={data} />
        </>
    );
}

export default Speakers;

导航栏组件

import Image from "next";

const navbarData = [
    {   "id": "1",
        "title": "home",
        "ref": "#home"
    },
    {   "id":"2",
        "title": "Skills",
        "ref": "#skills"
    },
    {   "id":"3",
        "title": "The List",
        "ref": "#theList"
    },
    {   "id": "4",
        "title": "Team",
        "ref": "#team"
    },
    {   "id": "5",
        "title": "Contact",
        "ref": "#contact"
    },
];

function Navbar() {
    
    return (
        <>
            <nav className= "navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
                <div className="container">
                    <a className="navbar-brand" href="#page-top">
                        <Image src="./knowledge Memo.svg" alt="..." /></a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                        Menu
                        <i className="fas fa-bars ms-1"></i>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarResponsive">
                        <ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                            {navbarData.map((link, idx) => {

                                return (
                                    <li key={`Navbar${JSON.stringify(link)}`} data-index={idx} className="nav-item"><a className="nav-link" href={link.ref}>{link.title}</a></li>

                                );
                            })}
                        </ul>
                    </div>
                </div>
            </nav>
        </>
    );
}

export default Navbar;

index.js 组件

//import Head from 'next/head'
import Skills from '../src/components/Skills';

const Home = () => {

  return (    
   <Skills />
  );
}
export default Home;

header.js 组件

import styles from "../../styles/Home.module.scss";
const Header = () => {
    return (
      <header className={styles.masthead}>
              <div className={styles.container}>
                  <div className={styles.masthead_subheading}>React Jedi Road Map</div>
                  <div className={styles.masthead_heading , "text-uppercase"}>this is the way!</div>
                  <a className="btn btn-primary btn-xl text-uppercase" href="#services">Tell Me More</a>
              </div>
        </header>
     );
  }
  
  export default Header;

技能列表组件

import Skill from "../components/Skill";
import styles from "../../styles/Home.module.scss";
import { data } from '../../SkillData';

function SkillsList () {
    return (
        <div className={styles.container, "container"}>
        <div className="row">
          {data.map(function (skillCard) {         
            return (
              <Skill key={skillCard.id} skillCard={skillCard} />
            )
          })}
  
        </div>
      </div>
    )
}

export default SkillsList;

标签： reactjsnext.js

Answer 1