Object.Array.map是未定义的ReactJS组件MERN堆栈

Question

我的组件：

import React, { useEffect, useState } from 'react'
import './viewAcc.css'
import HttpService from '../../services/http-service'
const http = new HttpService()
function ViewAcc({match}){
useEffect(()=>{
getAcc()
}, [])
const [acc, setAcc] = useState({})
const getAcc = async()=>{
const data = await http.getAcc(match.params.id)
setAcc(data[0])
}
return(
<div style={{display: "block"}} className="container">
<div className="row">
<div className="col-8" style={{alignItems:"center", marginBottom:"40px"}}>
<h3><b>Name: {"u00a0u00a0"}</b> {acc.name}</h3>
<div style={{display:"flex", alignItems:"center"}}>
<h3><b>Phone Nos: </b></h3>
{acc.ph_nos.map(i => 
<p key={i}>{i}</p>
)}
</div>
</div>
<div className="col-sm">
<input></input>
</div>
</div>
</div>
)
}
export default ViewAcc

当我写这段代码时，npm自动刷新，显示了姓名和电话号码(这意味着数据正在被提取(，但当我回到主页并点击我的动态路由器链接时，显示TypeError: acc.ph_nos is undefined错误。

当我删除acc.ph_nos.map部分时，显示的名称没有任何错误。我该如何解决此问题？

Answer 1

您可以先将ph_nos属性设为空数组：

const [acc, setAcc] = useState({ph_nos: []})

或者，更好的是，将电话号码分离成一个单独的状态变量：

const [phoneNumbers, setPhoneNumbers] = useState([]);
// ...
const getAcc = () => {
http.getAcc(match.params.id).then(data => setPhoneNumbers(data[0].ph_nos));
};

然后在渲染时引用CCD_ 3阵列而不是CCD_。

您还可以简化

useEffect(()=>{
getAcc()
}, [])

至

useEffect(getAcc);