迭代数组时，记录未完全显示在react hooks页面中 [英] While iterating the array, the records are not completely displaying in react hooks page
问题描述
虽然在react-hooks中使用map函数进行迭代，但是数组数据未正确显示在页面中，我可以看到该数组具有3条记录，但是在进行迭代时，它仅显示两条记录，并且得到的图像也太相同显示两次.有人可以帮我在这里找到问题吗?
我可以看到在控制台中记录了一个警告错误:
While iterating using map function in react-hooks, array data is not properly displaying in the page, I could see the array has got 3 records, but while iterating it is displaying only two records and that too same image got displayed twice. Could someone please help me to identify the issue here ?
I can see a warning error logged in console:
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;
推荐答案
问题是从服务器传入的数组正在复制.在服务器上的代码固定之前，您只需在第二个useEffect内部调用setDailyStatusPlayers(res.data.dailyStatus[0])即可传入数组的第一个值.
The issue is that the array passed in from the server is being duplicated. Until the code on the server is fixed, you can simply pass in the first value of the array by calling setDailyStatusPlayers(res.data.dailyStatus[0]) inside of the second useEffect.
还应更改dailyStatusPlayers.map(([{id, photo, position, dailystatus}])以删除包装数组.因此它应该变成dailyStatusPlayers.map(({id, photo, position, dailystatus}).
Should also change dailyStatusPlayers.map(([{id, photo, position, dailystatus}]) to remove the wrapping array. So it should become dailyStatusPlayers.map(({id, photo, position, dailystatus}).
这是 Codesandbox ，带有一个工作示例.
Here is a Codesandbox with a working example.
这篇关于迭代数组时，记录未完全显示在react hooks页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
