錯誤訊息：如果您打算渲染一組子項，請使用陣列而不是ReactJS

我的專案有問題。一切正常，直到我將 Navbar 組件添加到技能一然后我收到以下錯誤訊息。一旦我從技能組件中洗掉導航欄，一切都會運行得很好。

錯誤：物件作為 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;

uj5u.com熱心網友回復：

在 Navbar 組件中：我認為JSON.stringify()map 函式中的for 鍵是同步的，但嘗試將索引作為鍵，看看它是否能解決它。

uj5u.com熱心網友回復：

key={`Navbar${JSON.stringify(link)}`}

很可能這就是問題所在。您不能使物件成為字串，尤其是不能使用 JSON.stringify() 從物件回傳 JSON 字串。無論如何，您的資料已經被嚴格化了。所以，鏈接是一個物件，它不能像那樣插入到字串中。而是使用 id 或 idx 作為鍵，因為它無論如何像之前所說的那樣更有意義。

uj5u.com熱心網友回復：

在導航欄組件中：

import Image from “next/image”

代替

import Image from “next”

另外，請確保在 Image 組件上指定width和heightprops。或使用layout=“fill”

標籤：反应 下一个.js

上一篇：在React中使用2D地圖列印棋盤

下一篇：如何從reactjs中的另一個類組件重定向到一個類組件