如何将映射数据作为道具发送到反应中的另一个组件答案

【问题标题】：How to send mapped data as props to another component in react如何将映射数据作为道具发送到反应中的另一个组件
【发布时间】：2021-10-14 14:10:39
【问题描述】：

我想将映射数据作为道具发送到另一个组件。

我的代码如下所示：

<div className={styles.myTeamFlex}>
  {userTeams.map((team, index) => (
    <TeamCard
      key={team + index}
      active={active}
      index={index}
      data={team}
      teamRoles={userTeamRoles}
      setactive={setactive}
    />
  ))}
</div>;

我想在另一个组件中获取这些数据，就像我有另一个组件一样
组件，我在该组件中导出了上述组件，但 map 方法不起作用并抛出一个错误：

Cannot read property 'map' of undefined

我该怎么做？

【问题讨论】：

userTeams 是如何声明的？它在初始渲染中的价值是多少？后续渲染的价值？它是如何更新的？ stackoverflow.com/help/minimal-reproducible-example
idownvotedbecau.se/unreadablecode
您需要检查 userTeams 是否为 Array，在映射之前添加此检查 Array.isArray(userTeams)

标签： javascript reactjs react-hooks next.js

【解决方案1】：

发生这种情况是因为在定义状态时您没有将默认值设置为[]。

试试这个：

const [userTeams, setUsersTeam] = useState([]); // Note []

另一个选项是在映射之前检查userTeams。更改此行：

{userTeams.map((team, index) => (

到

{usersTeam && userTeams.map((team, index) => (

【讨论】：

【解决方案2】：

您必须检查 userTerms 是否为数组

<div className={styles.myTeamFlex}>
  {userTeams&&userTeams.lenght>0&&userTeams.map((team, index) => (
    <TeamCard
      key={team + index}
      active={active}
      index={index}
      data={team}
      teamRoles={userTeamRoles}
      setactive={setactive}
    />
  ))}
</div>;

【讨论】：

【解决方案3】：

父.js

import "./styles.css";
import TeamCard from "./teamCard";

export default function App() {
  let TeamArray = [
    { name: "team1", color: "blue" },
    { name: "team2", color: "red" },
    { name: "team3", color: "green" }
  ];
  console.log(TeamArray);
  return (
    <div>
      {TeamArray.map((team, index) => (
        <TeamCard key={team.name + index} data={team} idIndexObject={index} />
      ))}
    </div>
  );
}

Children.js

const TeamCard = ({ data, idIndexObject }) => {
  return (
    <div>
      <h1>{data.name}</h1>
      <h2>{data.color}</h2>
      <h3>{idIndexObject}</h3>
    </div>
  );
};

export default TeamCard;

检查沙箱 =>

请更新您的帖子，以便下次有更好的视觉呈现

【讨论】：