映射仅在条件语句中给出的对象内存在的数组
映射仅在条件语句中给出的对象内存在的数组
提问于 2020-08-10 04:58:41
我在使用Reactjs。
我想呈现一个存在于对象中的数组。
state = {
obj: {
name: abhishek,
age: 23,
characterList: ['a','b','c','d']
}
}我发现为了呈现characterList，我必须用一个条件语句来包装它。
我也找不出原因。
不正确：
render(){
return(
<>
{
this.state.obj.characterList.map((character, i) => {
return(
<h1>{character}</h1>
)
})
}
</>
)这会产生错误-“无法读取未定义的属性”映射“。
但如果像这样有条件的陈述-
正确：
render(){
return(
<>
{ this.state.obj.characterList ?
(
this.state.obj.characterList.map((character, i) => {
return(
<h1>{character}</h1>
)
})
) : null
}
</>
)原始代码:该代码出现错误(无法读取未定义的属性“映射”)
export default (props) => {
const [FAQs, setFAQs] = useState([]);
useEffect(async () => {
const res = await Axios.get("http://localhost:5000/FAQs/getFAQs");
setFAQs(res.data);
console.log(res.data);
}, []);
return (
<React.Fragment>
<div className="faqs-wapper">
<div className="faqs-heading">
<h1>Frequently asked questions</h1>
<h2>{FAQs.category}</h2> //This works fine.
</div>
{
FAQs.FAQList.map((QA,i) => {
return (
<div key={i}>
<p>{QA.question}</p>
</div>
)
})
}
</div>
</React.Fragment>
);
};res.data的到来是：
{
category: "Getting Started",
FAQList: [
{
question: "is two factor authentication mandatory?",
answer: "Clients are required to perform 2FA."
},
{
question: "how long does transfer take?",
answer: "Depends on amount."
},
]
}原始代码:在条件语句中给出的代码是有效的。
export default (props) => {
const [FAQs, setFAQs] = useState([]);
useEffect(async () => {
const res = await Axios.get("http://localhost:5000/FAQs/getFAQs");
setFAQs(res.data[0]);
console.log(res.data[0]);
}, []);
return (
<React.Fragment>
<div className="faqs-wapper">
<div className="faqs-heading">
<h1>Frequently asked questions</h1>
<h2>{FAQs.category}</h2> //This works fine.
</div>
{ FAQs.FAQList ?
FAQs.FAQList.map((QA,i) => {
return (
<div key={i}>
<p>{QA.question}</p>
</div>
)
}) : null
}
</div>
</React.Fragment>
);
};回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-10 07:10:41
您正在将常见问题初始化为useState中的空数组。在您的api请求完成之后，您的setFAQs方法似乎将FAQs设置为一个对象，而FAQList作为FAQs对象上的键。将setFAQs(res.data)更改为setFAQs(res.data.FAQList)，将地图从FAQs.FAQList.map更改为FAQs.map
发生原始错误是因为组件是在api请求完成且FAQs.FAQList未定义之前呈现的。您正在试图在这里查找一个未定义值的属性：FAQs.FAQList.map，它引发类型错误。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63334351
复制相关文章
相似问题
腾讯云开发者
