反应组件不刷新状态更改

Question

我正在获取所有比赛行并设置CompetitionRows状态数组。然后，我针对cntsts数组检查行。如果该行具有一个全新的CompetitionID，则将一个新的比赛添加到cntsts数组中。如果raceID已经存在，则将联赛添加到该比赛的CompetitionLeagues数组中。

检查所有行之后，然后将竞赛状态数组设置为cntsts数组。状态数组总是看起来总是正确的，但是当我映射比赛数组时，它并不能一致地呈现表行。

这是整个组成部分

import React, {useState, useEffect} from 'react';
import {Row, Col, Table, Button} from 'react-bootstrap';
import { connect } from 'react-redux';

/*
   Fetch open contests, create List Item for each contest. Populate with details 
   Contest Object : 
        {
            contestID: Number, 
            contestLeagues: [
                {
                    leagueID: Number, 
                    leagueName: String
                }   
            ],
            entry: Number, 
            bankroll: Number, 
            prizepool: Number,
            start: Date, 
            end: Date, 
            minPlayers: Number, 
            maxPlayers: Number
        }
*/

const OpenContests = (props) => {
    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();
    },[]);

    //run when contest rows array changes 
    useEffect(()=>{
        let cntsts = [];
        let count = 1;
        if(contestRows.length > 0){
            contestRows.forEach(row=> {
                cntsts = checkRow(row);
                count = count++;
            })
            if(count === contestRows.length){
                setContests(cntsts);
            }
        }
    },[contestRows]);
    
    //Check row and update contests, either adding a league to an existing contest or adding a new contest
    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];
            console.log(index)
        }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: '', 
                maxPlayers: ''
            })
        }
        return [...arr];

    }; 


    //Enter contest 
    const enterContest = async (contestID) => {
        const body = {
            contestID: contestID,
            accountID: props.accountID
        };

        const opts = {
            method: "POST",
            body: JSON.stringify(body),
            headers: {
                "Content-Type": "application/json"        
            }
        }

        const url = "/contests/enter";

        //enter contest
        fetch(url, opts)
        .then(response=> {
            console.log(response.json())
        })
        .catch(err=>{
            console.log(err)
        })
    }

    console.log(contests.length);

        return (
            <Row>
                <Col>
                    <h3>Open Contests</h3>
                    <Table striped bordered hover>  
                        <thead>
                            <tr>
                                <td>Contest</td>
                                <td>Type</td>
                                <td>Entry Fee</td>
                                <td>Prizepool</td>
                                <td>Entries</td>
                                <td>Bankroll</td>
                                <td>Start</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </thead>               
                        <tbody>   
                            {contests.map(contest=>{
                                console.log(contest)
                                return(
                                    <tr key={contest.contestID}>
                                        <td>Contest Name TBD</td>
                                        <td>{contest.contestType}</td>
                                        <td>${contest.entry}</td>
                                        <td>${contest.prizepool}</td>
                                        <td>Entries(need calculated)</td>
                                        <td>${contest.bankroll}</td>
                                        <td>{contest.start}</td>
                                        <td><Button onClick={()=>alert("details")}>Details</Button></td>
                                        <td><Button onClick={()=>enterContest(contest.contestID)}>Enter</Button></td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </Table>            
                </Col>    
            </Row>     
        )

}

const mapStateToProps = (state) => {
    return {
        accountID: state.user.ID
    }
}

export default connect(mapStateToProps)(OpenContests);

这是加载表行时的比赛状态数组。

这是不加载表行时的比赛状态数组。

有人可以解释为什么不渲染。似乎状态变量没有触发重新渲染，我不明白为什么。