映射函数在react组件中给我[对象对象]

Question

嗨，我使用Map从我的对象列表中获取项目，但是当我呈现我的代码时，它会给我一个错误，并告诉我对象无效，而我对我的对象列表使用map，它运行得很好，我不知道我能做什么--请帮助我解决这个问题。我的物品清单：

import avatar from './avatar.jpg';
export const CompanyListItems=[
  {
    Name : "مهد کودک امام رضا",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه",],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  },
  {
    Name : "دارالقرآن الغدیر",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  },
  {
    Name : "مهد کودک لاله ها",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  },
  {
    Name : "مهد کودک ستاره ها ",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  }
]

这是我使用的map组件(我突出显示了问题行)：

const CompanyList = () => {
    const [ShowUser, setShowUser] = useState(true)
  return (
    <>

    <div className='m-16'>
        <Header
            category={"صحفه "}
            title={"لیست سازمان ها "}
        />
    </div>
    <div className='m-6'>
        <div className='Icons flex justify-center text-5xl'>
            <FcBusinessman onClick={() => setShowUser(true)}
                className={`mx-6 cursor-pointer 
            ${ShowUser ? 'bg-red-100 p-2 rounded-full' : ''} `} />
            <FcWorkflow onClick={() => setShowUser(false)}
                className={`mx-6 cursor-pointer 
            ${ShowUser ? '' : 'bg-red-100 p-2 rounded-full'} `} />
        </div>
        {/* //doctor list  */}
        <div className={`mt-8 ${ShowUser? "block": "hidden"}`}>
            {
                CompanyListItems.map((item, index) => (// *** in this Line is working Well ***
                    <COmpanyLIst1
                        key={index}
                        avatar={item.Avatar}
                        Name={item.Name}
                        Score={item.Score}
                        NumberOfChildren={item.NumberOfChildren}
                        Achivement={item.Achivement}
                        About={item.About}
                        Id={index}
                    />
                ))
            }
        </div>
        <div className={`mt-8 ${!ShowUser? "block": "hidden"} grid grid-cols-3 gap-5`}>
        {
                CompanyListItems.map((item, index) => ( // *** it's the Issue Line ***
                    <CompanyList2
                        key={index}
                        Avatar={item.Avatar}
                        Name={item.Name}
                        Score={item.Score}
                        Id={index}
                    />
                ))
            }
        </div>
    </div>
</>
  )
}

它是CompanyList2组件：

const CompanyList2 = (Avatar, Name, Score, Id) => {
  console.log(Score); // undefined
  return (
    <div className=" mt-6 mx-auto a-box relative col-span-3 md:col-span-1">
      <div className="img-container">
        <div className="img-inner">
          <div className="inner-skew">
            <img src={Avatar}/>
          </div>
        </div>
      </div>
      <div className="text-container">
        <h3>{Name}</h3>
        <div className='text-xs my-2 font-extrabold'>
          <FaRegStarHalf
            className='text-yellow-400 ml-2 text-xl inline-block' />
          نمره روانشناس : {Score}
        </div>
      </div>
      <Link to={`/Dashboard/${Id}/Company`}>
        <button className='text-xs
                           text-white
                           w-36
                           bg-yellow-500 absolute -bottom-3 left-12 p-3 rounded-2xl
                            hover:bg-yellow-600
                             transition-all
                             ease-in-out duration-300
                             hover:rounded-3xl'>
          رفتن به صحفه دکتر
        </button>
      </Link>
    </div>
  )
}

这些是我的错误(如果我在CompanyList2中删除名称，它不会显示任何错误，但我的所有道具都会更改为未定义的)：

Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

The above error occurred in the <h3> component:

    at h3
    at div
    at div
    at CompanyList2
    at div
    at div
    at CompanyList (http://localhost:3000/main.010ca5560cf0b9d61403.hot-update.js:39:82)

Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Answer 1

当您将参数作为道具传递给组件时，就像您所做的那样：

CompanyListItems.map((item, index) => (
                    <CompanyList2
                        key={index}
                        Avatar={item.Avatar}
                        Name={item.Name}
                        Score={item.Score}
                        Id={index}
                    />
                ))

组件声明应该接收一个参数，即props，您可以使用对象析构来访问每个值：

const CompanyList2 = ({ Avatar, Name, Score, Id }) => {
  // Destructure props object, don't define multiple parameters
  
return (
    <>
    </>
  )
}