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

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 自动刷新时，显示了名称和 phone 数字（这意味着正在获取数据）但是当我返回主页并单击在我的动态路由器上 link， TypeError: acc.ph_nos is undefined显示错误。

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

Answer 1

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

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

或者，更好的是，将 phone 个数字分离到一个单独的状态变量中：

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

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

Object.Array.map is undefined ReactJS component MERN Stack

npm

reactjs

mern