在使用
map
作用于
react-hooks
我可以在控制台中看到一个警告错误:
import React, { useRef, useEffect, useState } from "react";
const [dailyStatusPlayers, setDailyStatusPlayers] = useState([]);
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
return () => isMounted.current = false;
}, []);
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();
}, []);
return (
<div className="availability_wrapper">
<h4>In: <span className="displayInCount">20</span></h4>
<div className="wrap">
<div className="container">
<div className="dailystatus_section">
<span className="playerdailyrecord">
<h4>Player Daily Status:</h4>
<div className="row">
{
dailyStatusPlayers.map(([{id, photo, position, dailystatus}]) =>(
<div key={id} className="playerdailyrecord_main">
<span className="dailstatus_playerphoto"><img className="dailstatus_playerImage" key={photo} src={photo}></img></span>
<span className="dailstatus" key={dailystatus}>{dailystatus}</span>
<span className="dailstatus_playerposition" key={position}>{position}</span>
</div>
))
}
</div>
<button className="OverlayDailyStatus" onClick={displayAvailabilityStatus}>Enter</button>
</span>
</div>
</div>
</div>
<DailyStatusDialog
onSubmit={onSubmit}
open={deleteDialog}
onClose={() => setDeleteDialog(false)}
/>
</div>
);
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 [teamData, setTeamData] = 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');
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[0]);
//setTeamData(res.data.dailyStatus[0]);
console.log("Complete array:"+res.data.dailyStatus[0]);
}
} catch (e) {
console.log(e);
}
}
fetchData();
}, []);
let i = 0;
const tempTeam1 = [];
const tempTeam2 = [];
while(teamData.length > 0) {
const random = Math.floor(Math.random() * teamData.length);
i%2 === 0 ? tempTeam1.push(teamData[random]) : tempTeam2.push(teamData[random]);
teamData.splice(random, 1);
i++;
}
useEffect(() => {
setTeam1(tempTeam1);
setTeam2(tempTeam2);
},[]);
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">
<h4>Player Daily Status:</h4>
<div className="row">
{
dailyStatusPlayers.map(({id, photo, position, dailystatus}) =>(
<div key={id} className="playerdailyrecord_main">
<span className="dailstatus_playerphoto"><img className="dailstatus_playerImage" key={photo} src={photo}></img></span>
<span className="dailstatus" key={dailystatus}>{dailystatus}</span>
<span className="dailstatus_playerposition" key={position}>{position}</span>
</div>
))
}
</div>
<button className="OverlayDailyStatus" onClick={displayAvailabilityStatus}>Enter</button>
</span>
</div>
</div>
<div>
<div className="container">
<div className="playerdistribution_section">
<h4>Team Selection</h4>
<div className="wrap">
<div className="left_col">
{
team1.map(({id, name, image}) =>(
<div>
<span key={name}>{name}</span>
</div>
))
}
</div>
<div className="right_col">
{
team2.map(({id, name, image})=>(
<div>
<span key={name}>{name}</span>
</div>
))
}
</div>
</div>
</div>
</div>
<div className="container">
<div className="weeklycount_graph_section">
<span className="avail_newImageback">
<img className="avail_newsImagesection" src="images/greenplayer.png"></img>
</span>
</div>
</div>
</div>
</div>
<DailyStatusDialog
onSubmit={onSubmit}
open={deleteDialog}
onClose={() => setDeleteDialog(false)}
/>
</div>
);
}
export default Availability;
