传递 JSON 数组作为 props 在 React 中运行，然后计算 area 中的项目

Question

抱歉。这里的新手在将 JSON 对象作为道具传递给函数时遇到问题。我显然做错了什么，但我已经搜索过，其他人的帖子似乎比我的更复杂。

我想将一个可能有零行或多行的数组传递给一个函数，然后我想计算有多少行。最后我会 return 一个字符串，这取决于它。我已经完成了最后一部分工作，但我无法在未定义的情况下传递数组。

App.js

const sampleTeams = [
  {
    team: "Jets",
    season: "2022/23",
    regfee: 35,
    feepaid: true,
  },
];

function App() {
  return (
    <Container className="my-4">
    <MemberCard
      forename="Bob"
      surname="Jones"
      playerNumber="154"
      registrations={sampleTeams}
    ></MemberCard>
    </Container>
  );
}

MemberCard.js

export default function MemberCard({
  forename,
  surname,
  memberNumber,
  registrations,
}) {
  return (
    <Card>
      <Card.Body>
        <Card.Title className="d-flex justify-content-between slign-items-baseline fw-normal mb-3">
          <div className="me-2">
            {forename} {surname}
          </div>
          <div className="d-flex align-items-baseline text-muted fs-6 ms-1">
            {memberNumber}
          </div>
        </Card.Title>
        <p>{getNumberOfTeams({ registrations })} registered</p>
        <Stack direction="horizontal" gap="2" className="mt-4">
          <Button variant="outline-primary" className="ms-auto">
            Register Team
          </Button>
        </Stack>
      </Card.Body>
    </Card>
  );
}

function getNumberOfTeams(registrations) {
  const numberOfTeams = registrations.length;
  // console.log(numberOfTeams);
  if (numberOfTeams === 1) return "1 team";
  return numberOfTeams + " teams";
}

Answer 1

在您的示例代码中，调用 getNumberOfTeams

的参数中有对象 shorthand

getNumberOfTeams({ registrations })

函数 getNumberOfTeams(registrations) 试图读取 registrations.length，但您向它传递了一个对象 { registrations: registrations }。 Object.length 将永远是 undefined。如果将代码更改为

，您的代码应该可以更正确地工作

        <p>{getNumberOfTeams(registrations)} registered</p>

传递 JSON 数组作为 props 在 React 中运行，然后计算 area 中的项目

Pass JSON array to function in React as props and then count items in area

javascript

arrays

reactjs

react-native