我正在构建简单的反应应用程序它显示地图未定义请解决这个错误它可能有很大帮助 子代码
const classes = useStyles()
const {qnsObject,answersList} = props.value
console.log(qnsObject,answersList)
return (
qnsObject.map((content,index) =>{
let count = content.tags.split(',')
return (
<div className = {classes.homeRecentQns} >
<div className ={classes.homeRecentQnsParent}>
<div className = {classes.avatar_parent}>
<div className ={classes.avatar}>
<Avatar alt='tfds' src ={content.profile_img} className
= {classes.small}>{content.firstName[0].toUpperCase()}</Avatar>
</div>
<div className ={classes.voted_parent}>
<ArrowDropUpTwoToneIcon className =
{classes.voted_up}/>
<p>125</p>
<ArrowDropDownTwoToneIcon className =
{classes.voted_down}/>
</div>
</div>
<div className ={classes.recentQns_parent}>
<div className = {classes.recentQns_tags_parent}>
<p className = {classes.recentQns_name}>
{content.firstName} {content.lastName}</p>
<p className = {classes.recentQns_occupation}>
{content.currentWorking}</p>
<p className = {classes.recentQns_askedIn}><b
className = {classes.recentQns_askedIn_bold}>Asked in:
</b>{content.posted_date}</p>
</div>
<div className ={classes.recentQns_desc}>
<p className ={classes.recentQns_title}>
{content.qnsTitle}</p>
<p className ={classes.recentQns_answers}>
{ReactHtmlParser(content.Question_body)}
</p>
</div>
<div className ={classes.recentQns_topic_tags}>
{content.tags.split(',').map(chip =>{
return <> <Chip label={chip} variant="filled"
color="primary" size="small" icon=
{<LocalOfferTwoToneIcon />} /></>
})}
</div>
<div className ={classes.recentQns_views_parent}>
<div className = {classes.popular_desc_view}>
<QuestionAnswerIcon className =
{classes.views_icon}/>
<div className = {classes.p}>
{answersList.length} Answers</div>
</div>
<div className = {classes.popular_desc_view}>
<VisibilityIcon className =
{classes.views_icon}/>
<div className = {classes.p}>5 views</div>
</div>
</div>
</div>
</div>
</div>
)
})
)
父代码
const Auth = useContext(Authapi)
const [body,setBody] = useState("")
const [open, setOpen] = React.useState(false);
const [dataQns,setDataqns] = useState([])
const [closeAns, setAns] = React.useState(false);
let href = window.location.href.split('/')
console.log(dataQns)
const classes = useStyles()
useEffect(() =>{
const get = async () =>{
const data = await fetch('/getAnswers/'+href[href.length -1])
const dataItems = await data.json()
console.log(dataItems)
setDataqns(dataItems)
}
get()
},[dataQns])
这个道具我路过
<ViewPostComponent value = {dataQns}/>
如何在新数据准备好使用钩子呈现时获得更新请回答这个问题
从服务器获取新数据时如何更新地图功能
答案 0 :(得分：0)
map is undefined 表示你还没有向 map() 函数传递任何数据
答案 1 :(得分：0)
可能您正在映射一个空数组或一个不是数组的变量。
您可以在映射前检查长度。
{
variable.length > 0 && variable.map((e) => your code )
}
答案 2 :(得分：0)
您可以在 api 调用之前使用内容加载
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
答案 3 :(得分：0)
{qnsObject && qnsObject.map((content,index)........}
在映射时试试这个。仅当 qnsObject 是数组时才会进行映射，否则将返回 null。