无法读取反应 -js 中未定义的属性“地图”

Question

这是孔组件

import React ,{useState} from 'react';
import useSWR from 'swr'
import Axios from "axios"
import Nav from '../home/nav';
import './mission.css';
import '../home/Cards.css';
 import CardItem from '../home/CardItem';
 import SweetAlert from 'sweetalert2-react';

const PostuleMission=(props)=>{
  const [show,setShow]=useState(false);
  const [donnee,setDonnee]=useState({ missions: [] });
  const [acceper,setEstaccepe]=useState(0);
  const handelAccept =(mission)=>{
    //alert("http://localhost:8080/BricoAccept/"+props.user.id+"/"+mission+"/1")
    Axios.put("http://localhost:8080/BricoAccept/"+props.user.id+"/"+mission+"/1")
 
      .then(res=>{
        setShow(true)
      })
      .catch(err =>{
       alert(err)
          })
  }  

const fetcher = (url) => fetch(url).then(res =>{return res.json()} )
const { data, error } = useSWR('http://localhost:8080/bricoleurs/'+props.user.id, fetcher)
   if (error) return (
           <div className="d-flex flex-column">
             <img alt="..." src="/assets/logo.png" style={{height:"100px",width:"100px"}} className="logo" />

               <p className="text-danger">failed to load</p>

           </div>);
   if (!data) {return (
     <div>
       <img alt="..." src="/assets/logo.png" className="logo" />
       <div className="d-flex flex-row" style={{position:"absolute",left:"50%",right:"50%",top:"45%" }}>      
          <div className="spinner-grow text-primary" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-secondary" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-success" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-danger" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-warning" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-info" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-light" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>
           <div className="spinner-grow text-dark" role="status">
           <span className="visually-hidden">Loading...</span>
           </div>  
 </div>
 </div>);}

     
//les cartes  

setDonnee(data.missions)

//const Missionss = (data.missions)?((data.missions[0].accepterBrico)?data.missions: []):[];

const Missions= data.missions.map((item)=>{
  console.log("hello"+ item.id);
 // setEstaccepe(0)    
 /* Axios.get("http://localhost:8080/accepterbrico/"+props.user.id+"/"+item.id)
        
  .then(res=>{

*/   
     //   alert(item.accepterBrico[0].bricoId)
  /*
if(item.accepterBrico) { 

      for( let i=0;i < item.accepterBrico.length;i++){
         if(item.accepterBrico[i].bricoId==props.user.id && item.accepterBrico[i].missionId ==item.id){

          if(item.accepterBrico[i].clientAccept==1 && item.accepterBrico[i].bricoAccept==1 ){
            setEstaccepe(1) ;
          }

          else if( item.accepterBrico[i].clientAccept==1 && item.accepterBrico[i].bricoAccept==0 ){
            setEstaccepe(2) ;
          }
          else{
            setEstaccepe(0) ;
          }

         } 
                
        }}
*/

  const id=item.id;
     return(
      <div className='cards'>
      <div className='cards__container'>
   
         
            <CardItem
              key={item.id}
              src={item.images}
              text={item.mission_description}
              label={item.titre_mission}
              path='/comment'
            />
            {(acceper==2)?  <div className="d-flex flex-row align-items-around p-3">
                <button onClick={()=>handelAccept(item.id)} className="btn btn-outline-success">Accepter</button>
                <button className="btn btn-outline-danger">Refuser</button>
            </div>:((acceper==1)?<div style={{color:"green",fontSize:"2em"}} ><p>Vous l'avais accepté</p></div>:<div style={{color:"red",fontSize:"2em"}} >Pas de réponse</div>)}
          
    </div>
  </div>
     )
    /*  })
    .catch(err =>{
     alert("  inside "+err)
         })*/
  }

);

    return(
    <div >
      <div id="postulemission"></div>
        <Nav data={props.user} />
           <div id="postulebox">
           <h1>MinuteBlog</h1>
           <SweetAlert
              show={show}
              title="Success"
              icon='warning'
              text="Congratulations vous avez bien obtenu la mission"
              onConfirm={() => {
                setShow(false)
              }}
            />
             {Missions}
           </div>
                   
    </div>
               );
}

export default PostuleMission;

我的反应代码有问题

当我使用循环函数（这样我可以从我提供给地图的对象列表中获取数据）时，地图方法不再读取我发送给它的数据

这是地图：

enter code

const Missions = data.missions.map((item) => {
  if (item.accepterBrico.length > 0) { 
    for (let i=0; i < item.accepterBrico.length; i++) {
      if (item.accepterBrico[i].bricoId == props.user.id && item.accepterBrico[i].missionId == item.id) {
        if (item.accepterBrico[i].clientAccept == 1 && item.accepterBrico[i].bricoAccept == 1) {
           dosomething;
        }
      } 
    }
  }

  return (<div>..... </div>)
});

这是发送到地图的数据：

{
    "id": 591,
    "descriptionProfil": null,
    "adresse": "harchi",
    "phone": "",
    "missions": [
        {
            "id": 586,
            "titre_mission": "client@gmail.com",
            "state": "Urgent",
            "
            "bricoleur_choisi": 0,
            "idmission": 0,
            "accepterBrico": [{
                "id": 603,
                "bricoId": 591,
                "missionId": 597,
                "clientAccept": 0,
                "bricoAccept": 0
            }]
        },

详情详情detailsdetailsdetailsdetailsdetailsdetails

Answer 1

问题

所有错误都在说，至少您的组件渲染之一是 data.missions 未定义。我怀疑它在初始渲染中，因为您没有定义足够准确的初始状态。

解决方案

1. 您可以定义更好的初始状态，以匹配您在初始渲染周期中尝试渲染的内容。 { missions: [] } 作为初始 data 状态值足以确保在初始渲染周期中定义和映射 data.missions。

   const [data, setData] = useState({ missions: [] });
   

2. 您可以使用保护子句或可选链接（也称为空检查）来防止访问可能为空或未定义的对象。

   const Missions = data.missions && data.missions.map((item) => { .... });
   

   或

   const Missions = data.missions?.map((item) => { .... });
   

   或提供后备值

   const Missions = (data.missions || []).map((item) => { .... });