使用array.map函数不返回任何东西

时间:2020-06-01 22:18:04

标签: javascript reactjs

竞赛数组的长度为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

这是竞赛数组enter image description here

0 个答案:

没有答案