无法读取反应 -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;

我的反应代码有问题

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

这是 map：

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>) });

这是发送到 map 的数据：

{
    "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
            }]
        },

细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节细节

Answer 1

问题

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

解决方案

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

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

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

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

   或者

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

   或提供后备值

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