Question

我是新来的人，如果有人可以解释这个问题，那很好，这个问题已经回答了，但我仍然很困惑。

import React from 'react' ; 
import Card from './Card.js';
const CardList = ({Friends}) =>{
    const Cardcomponent = Friends.map((user , i) => {
        return(
            <div>
                 <Card id={Friends[i].id} name={Friends[i].name} username={Friends[i].username} instagram={Friends[i].instagram}  />
            </div>
              )
    })
return(
          <div>
                {Cardcomponent}
          </div>
      )
} 
export default CardList ;

对象作为React子对象无效（找到：带有键{}的对象）。如果要渲染子级集合，请改用数组。

Answer 1

Cardcomponent是组件列表。因此要显示它们，就像错误消息所告诉您的那样，您必须使用map

{Cardcomponent.map((component, index) => {
  return (
    <div key={index}>
      {component}
    </div>
  )
}

Answer 2

您没有考虑正确的反应。

好友数据来自某些外部来源。您将在组件中使用它。

您在这里有2个主要组成部分。

卡：显示有关单个用户的数据
CardList：显示卡组件

每个组件都需要不同的数据才能正常工作。当您将好友数组提供给CardList时，您只希望它为列表中的每个好友元素呈现一个Card组件。

React负责幕后的所有DOM操作，因此需要确保可以唯一地标识屏幕上的每个元素。这就是为什么我们有时会在知道很多组件的情况下需要告诉它使用什么键来提供帮助的原因。

Card组件仅需要有关1个朋友的信息，因此我们从CardList中提供了所有信息。

请注意，未在CardList中定义Card，并且在App中未定义CardList。如果需要的话，这使我们可以在其他地方重用这些组件。

关于这个还有很多要说的，但是希望这会有所帮助。

这是一个示例应用程序：

import React from "react";
import ReactDOM from "react-dom";

const Card = ({ friend, id, name, username, instagram }) => (
  <div>
    <ul>
      <li>id: {id}</li>
      <li>name: {name}</li>
      <li>username: {username}</li>
      <li>instagram: {instagram}</li>
    </ul>
  </div>
);

const CardList = ({ friends }) => (
  <div>
    {friends.map(friend => <Card key={friend.id} {...friend} />)}
  </div>
);

function App() {
  const friends = [
    { id: 1, name: "John Smith", username: "jsmith", instagram: "N/A" },
    { id: 2, name: "Mary Jane", username: "mjane", instagram: "puppyLover" },
    {
      id: 3,
      name: "Harry Potter",
      username: "hpotter",
      instagram: "best_wizard"
    }
  ];
  return (
    <div className="App">
      <CardList friends={friends} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

当我在Card.js文件（某些其他文件）的属性中添加{}时，问题又回到了另一个文件中的函数所使用的道具。

   const Card = ( id , email , name ) => { return( ...
                                             ....);
      to 
   const Card = ( {id , email , name} ) => { return( ...
                                                     ...);

此答案帮助我找出了解决方案 https://stackoverflow.com/a/33577681/11556916

对象作为React子对象无效（找到：带有键{}的对象）。如果要渲染子级集合，请改用数组

3 个答案: