reactjs - 迭代数组时，记录未完全显示在反应挂钩页面中

问题描述

map使用in 函数进行迭代时react-hooks，数组数据未正确显示在页面中，我可以看到该数组有 3 条记录，但在迭代时它只显示两条记录，并且同样的图像显示了两次。有人可以帮我在这里找出问题吗？我可以在控制台中看到一个警告错误：

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;

标签： reactjsaxiosreact-hooks

reactjs - 迭代数组时，记录未完全显示在反应挂钩页面中

问题描述

解决方案

推荐阅读