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: {"\u00a0\u00a0"}</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));
};

然后在渲染时引用phoneNumbers数组而不是ph_nos。

你也可以简化

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

到

useEffect(getAcc);