javascript - MERN，Mongoose：我随机化了一个数组并将其保存到 Mongo，但我必须刷新页面

Question

比赛应用程序。

当用户注册时，它们存储在Tournament.participants数组中。

锦标赛开始时，所有用户Tournament.participants都被随机推送到Tournament.bracket.players

处理此问题的路线：

router.post('/:id/shuffle-players', (req, res) => {
    const shuffleParticipants = array => {
        let currentIndex = array.length, temporaryValue, randomIndex;   
        while(0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;  
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }   
        return array;
    };

    Tournament.findByIdAndUpdate(req.params.id)
        .then(tournament => {
            if(!tournament) res.status(404).json({ msg: "Cannot find this tournament" });
            else {
                const { participants } = req.body;
                const { players } = tournament.bracket;

                if(players.length !== participants.length) {
                    const shuffledPlayers = shuffleParticipants(participants);
                    shuffledPlayers.forEach(player => {
                        players.push(player);
                    });
                };
                return tournament.save();
            };
        })
        .then(savedTournament => res.json(savedTournament))
        .catch(err => res.json(err));
});

玩家以随机顺序洗牌，并在前端正确显示。

问题是，当组件第一次渲染时，Tournament.bracket.players它们以原始顺序显示。

这很奇怪，因为这表明组件在 Post 请求之前呈现，但这不可能，因为Tournament.bracket.players在请求之前是空的，所以组件应该中断。

我必须刷新页面才能真正让它们随机化。

这是一个带有 Redux 的 MERN 应用程序，我可以发布 reducer/action 逻辑，但我不知道这是否是一个问题。

零件：

export const HostUI = ({ tournament }) => {
    const { players } = tournament.bracket;

    return (
        <div style={{color:"lightgrey"}}>
            <h1>Host UI</h1>
            {
                players && players.map(player => (
                    <div>
                        {player.username}
                    </div>
                ))
            }
        </div>
    );
};

标签： javascriptreactjsmongodbmongoosemern