竞赛数组的长度为2,我应该看到其中包含“测试”文本的两个div,但是什么也没有显示。在返回地图之前,我可以登录到控制台,它的记录是预期的两倍,但未返回任何内容。有什么想法吗?
return (
<Row>
<Col>
<h3>Open Contests</h3>
{contests.map((contest, i)=>{
return (
<div key={i}>
<p>test</p>
</div>
)
})}
</Col>
</Row>
)
编辑:这是整个组件
import React, {useState, useEffect} from 'react'
import {Row, Col} from 'react-bootstrap';
const OpenContests = () => {
const [contestRows, setContestRows] = useState([]);
const [contests, setContests] = useState([]);
//fetch open contests on initial render
useEffect(()=>{
const fetchOpenContests = async () => {
const response = await fetch('/contests/open');
const data = await response.json();
setContestRows(data)
}
fetchOpenContests();
},[])
const checkRow = (row) => {
let arr = contests;
let index = contests.findIndex(contest=> contest.contestID === row.intContestID);
if(index > -1){
let league = {
leagueID: row.intLeagueID,
leagueName: row.strLeagueName
}
arr[index].contestLeagues = [...arr[index].contestLeagues, league];
setContests(arr);
}else{
arr.push({
contestID: row.intContestID,
contestType: row.strContestType,
contestLeagues: [
{
leagueID: row.intLeagueID,
leagueName: row.strLeagueName
}
],
entry: row.decEntryFee,
bankroll: row.decInitialBankRoll,
prizepool: row.decPrizePool,
start: row.dtmStart,
end: row.dtmEnd,
minPlayers: null,
maxPlayers: null
})
}
}
//run when contest rows array changes
useEffect(()=>{
if(contestRows.length > 0){
contestRows.forEach(row=> {
checkRow(row)
})
}
},[contestRows])
return (
<Row>
<Col>
<h3>Open Contests</h3>
{contests.map((contest, i)=>{
return (
<div key={i}>
<p>test</p>
</div>
)
})}
</Col>
</Row>
)
}
export default OpenContests