数组出现在console.log()中，但不会在react中渲染?使用useEffect钩子

Question

import React, { useEffect, useState } from "react";
import { useGetTeamQuery } from "./store/teamsApi"

function TeamList(props) {
const team_names = []
console.log("GET ALL TEAMS", props.props.items)

useEffect(() => {
const fetchData = async () => {
for (let i = 1; i < 31; i++) {
const res = await fetch(
`http://sports.core.api.espn.com/v2/sports/football/leagues/nfl/seasons/2022/teams/${i}?lang=en&region=us`
);
const json = await res.json();
console.log("JSON", json)
team_names.push(json.displayName)
}};
fetchData();
}, [team_names]);
console.log("DATA", team_names)

return (
<>
<div className="container">
<h1>Team List</h1>
<div>
<ol>
{console.log("DATA 2", team_names)}
{team_names.map(team => (
<li>{team}</li>
))}
</ol>
</div>
</div>
</>
)
}

export default TeamList;

没有错误，但是没有代码在标签之外呈现。

试过使用大量的标签，也试过对useeffect函数进行不同的修改。因为列表按预期出现是"DATA 2"Console.log，我的想法是问题是下面的代码块。我不知道如何重新表述这个地图:

{team_names.map(team => (
<li>{team}</li>
))}

Answer 1

您应该使用useState来保存来自API的响应。

所以这是你的解决方案:

import React, { useEffect, useState } from "react";
import { useGetTeamQuery } from "./store/teamsApi";
function TeamList(props) {
const [team_names, setTeam_names] = useState([]);
useEffect(() => {
let arr = [];
async function fetchData() {
try {
for (let i = 1; i < 31; i++) {
const response = await fetch(
`https://sports.core.api.espn.com/v2/sports/football/leagues/nfl/seasons/2022/teams/${i}?lang=en&region=us`
);
const json = await response.json();
arr.push(json.displayName);
}
} catch (e) {
console.error(e);
}
setTeam_names(arr);
}
fetchData();
}, []);
return (
<>
<div className="container">
<h1>Team List</h1>
<div>
<ol>
{team_names.map((team, i) => (
<li key={i}>{team}</li>
))}
</ol>
</div>
</div>
</>
);
}
export default TeamList;

在codesandbox中运行:https://codesandbox.io/s/admiring-liskov-1vmzd7?file=/src/TeamList.js