如何在 React Hooks 中随机选择并分成两个团队

Question

我想从array中随机选择球员并分成两队。如果将偶数玩家平均分成两支球队，但如果球员人数是奇数（不是偶数），则可以在任何球队中多出一名球员。

我创建了一个 javascript 来分成团队，但我不知道如何将 test1、test2 数组而不是 allUsers 推送到两个团队。

我提供了一个演示链接： https://codesandbox.io/s/amazing-ellis-2h3pd?file=/src/components/Team.js

import React, { useRef, useEffect, useState } from "react";
import axios from 'axios'
import DailyStatusDialog from "../modal/DailyStatus";
import * as moment from 'moment';
    const allPlayers = [
  {
    id: "1",
    name: "Player 1",
    image: "images/photo-2345678.JPG"
  },
  {
    id: "2",
    name: "Player 2",
    image: "images/photo-2345679.JPG"
  },
  {
    id: "3",
    name: "Player 3",
    image: "images/photo-2345680.JPG"
  },
  {
    id: "4",
    name: "Player 4",
    image: "images/photo-2345681.JPG"
  },
  {
    id: "5",
    name: "Player 5",
    image: "images/photo-2345682.JPG"
  }
];

const Availability = () =>{
    const [team1, setTeam1] = useState([]);
    const [team2, setTeam2] = useState([]);
    const [deleteDialog, setDeleteDialog] = useState(false);
    const [playerId, setPlayerId] = useState("");
    const [helperText, setHelperText] = useState('');
    const loginUserEmail = localStorage.getItem('loginEmail');
    const [dailyStatusPlayers, setDailyStatusPlayers] = useState([]);
    //const [dailyinput, setDailyInput] = useState('');
    const [inCount, setInCount] = useState("");
    const isMounted = useRef(false);
    const c_day = moment().format('dddd');
    const c_date = moment().format('DD-MM-YYYY');

    let i = 0;
    const tempTeam1 = [];
    const tempTeam2 = [];
    while(allPlayers.length > 0) {
      const random = Math.floor(Math.random() * allPlayers.length);
      i%2 === 0 ? tempTeam1.push(allPlayers[random]) : tempTeam2.push(allPlayers[random]);
      allPlayers.splice(random, 1);
      i++;
    }
    setTeam1(tempTeam1);
    setTeam2(tempTeam2);
    
    useEffect(() => {
        isMounted.current = true;
        return () => isMounted.current = false;
      }, []);


    const displayAvailabilityStatus = () =>{
       setDeleteDialog(true);
    }
     
    useEffect(() => {
        const fetchData = async () => {
          try {
            const res = await axios.get('http://localhost:8000/service/availability');
            if (isMounted.current) {
               setDailyStatusPlayers(res.data.dailyStatus);
            }
          } catch (e) {
            console.log(e);
          }
        }
        fetchData();
      }, []);
    

    const onSubmit = (dailyinput) =>{
        console.log("Here Daily:"+ dailyinput);
        const dailyStatus = async () => {
            try {
                const params = {
                    email: loginUserEmail,
                };
              const res = await axios.post('http://localhost:8000/service/availability', { dailystatus: dailyinput }, {params} );
              console.log("Dailystatus update" + res.data.success);
              if (res.data.success) {
                setDeleteDialog(false);
              }
              else {
                console.log(res.data.message);
                setHelperText(res.data.message);
              }
            } catch (e) {
              setHelperText(e.response.data.message);
            }
          }
          dailyStatus();
    }

    return (
        <div className="availability_wrapper">
          <div className="displayCurrentDate">
          <b>{c_day}</b>, {c_date}
          </div>
         <h4>In: <span className="displayInCount">20</span></h4>
            <div className="wrap">
                <div className="container">
                    <div className="dailystatus_section">
                        <span className="playerdailyrecord">
                            <div className="row">
                                {
                                dailyStatusPlayers.map(({id, dailystatus}) =>(
                                <div key={id}  className="playerdailyrecord_main">
                                    <span className="dailstatus_playerphoto"><img className="dailstatus_playerImage"src="images/photo-1592866808392.JPG"></img></span>
                                <span className="dailstatus">{dailystatus}</span>
                                    <span className="dailstatus_playerposition">Forward</span>
                                </div>
                                ))        
                                }
                            </div>
                            <span className="">
                                <button className="OverlayDailyStatus" onClick={displayAvailabilityStatus}>Enter</button>
                            </span>
                        </span>
                    </div>
                </div>
                <div>
                    <div className="container">
                        <div className="playerdistribution_section">
                            <h4>Team Selection</h4>
                        </div>
                    </div>
                    <div className="container">
                        <div className="weeklycount_graph_section">
                                <h4>Weekly Player Availability</h4>
                        </div>
                    </div>
                </div>
            </div>
            <DailyStatusDialog
              onSubmit={onSubmit}
              open={deleteDialog}
              onClose={() => setDeleteDialog(false)}
            />
        </div>
    );

}
export default Availability;

Answer 1

你可以从数组中随机取出一个元素并移除它，重复这个过程直到数组为空

const items = [1,2,3,4,5]
const [team1, setTeam1] = useState([]);
const [team2, setTeam2] = useState([]);

let i = 0;
const tempTeam1 = [];
const tempTeam2 = [];
while(items.length > 0) {
  const random = Math.floor(Math.random() * items.length);
  i%2 === 0 ? tempTeam1.push(items[random]) : tempTeam2.push(items[random]);
  items.splice(random, 1);
  i++;
}
setTeam1(tempTeam1);
setTeam2(tempTeam2);

<div key={name} className="left_col">
  {team1.map(name=><span>{name}</span>)}
</div>
    
<div key={name} className="right_col">
  {team2.map(name=><span>{name}</span>)}
</div>