我的朋友帮助我将糟糕的JS web应用程序重写为下一个应用程序，但在尝试继续时，我遇到了障碍和很多困惑。
我构建了两个返回对象的API：
import fetch from "isomorphic-fetch";
import cheerio from "cheerio";
export const getData = async (player) => {
const req = await fetch('blahblahblah');
...
return teams;
};
module.exports = {
getData,
};
另一个返回teamStats
我有两个端点：[id].js-和[tid].js
import { getData } from "../../../utils/api";
export default async (req, res) => {
const details = await getData(req.query.id);
res.status(200).json(details);
};
import { getStats } from "../../../utils/squadapi";
export default async (req, res) => {
const details = await getStats(req.query.tid);
res.status(200).json(details);
};
两个组件(这一个运行良好(：
import React from "react"; // react dependencies
const Teams = ({ teams }) => {
return teams.map((team, index) => (
<React.Fragment key={index}>
<br />{" "}
<div class="container">
{team.map((pokemon) => (
<React.Fragment key={pokemon.pokemon}>
<br /> <div class="bout">{pokemon.bout}</div>
<div class="child">
<img src={pokemon.sprite} />
<p>{pokemon.pokemon}</p>
</div>
</React.Fragment>
))}
</div>
<br />
</React.Fragment>
));
};
export default Teams;
这个不起作用(teamStats未定义(
import React from "react";
const Squads = ({ teamStats }) => {
return (
<React.Fragment>
<img src={teamStats.logo} />
</React.Fragment>
);
};
export default Squads;
为什么我的第二个组件返回未定义？我尽了最大努力复制我朋友为创建第一个运行良好的组件所采取的步骤。。。第二个错误"teamStats"未定义。
edit:目录结构为：Pages > api > player > [id].jsPages > api > squad > [tid].js
edit:index.js:
import Head from "next/head";
import React, { useState } from "react";
import Teams from "../components/Teams";
import styles from "../../styles/Home.module.css";
import Squads from "../components/Squads";
export default function Home() {
const [teams, setTeams] = useState([]);
const [player, setPlayer] = useState("Player Name");
const [loading, setLoading] = useState(false);
const [squad, setSquad] = useState("9a7059e278");
const loadSquad = async () => {
setLoading(true);
const req = await fetch(`/api/squad/${squad}`);
const json = await req.json();
setSquad(json);
setLoading(false);
};
const loadPeople = async () => {
setLoading(true);
const req = await fetch(`/api/player/${player}`);
const json = await req.json();
setTeams(json);
setLoading(false);
};
return (
<div className={styles.main}>
<Head>
<title>Liam</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1>Silph Team Finder</h1>
<br />
<div>
<select
value={squad}
onChange={(e) => setSquad(e.currentTarget.value)}
>
<option value="9a7059e278">Stoked</option>
</select>
<button onClick={() => loadSquad()}>Load</button>
{loading && <div className={styles.load}>LOADING</div>}
<Squads />
<input value={player} onChange={(e) => setPlayer(e.target.value)} />
<button onClick={() => loadPeople()}>Load</button>
{loading && <div className={styles.load}>LOADING</div>}
</div>
<div className={styles.teams}>
<Teams teams={teams} />
</div>
</main>
</div>
);
}
来源于@julialves&卡尔文我的jsx/组件缺少道具：
<Squads teamStats={squads} />