型別錯誤：無法讀取未定義的屬性（讀取“地圖”）嘗試讀取RESTapi并顯示

這是從我正在查詢的 REST api 獲取的 JSON 內容

{
    "DataLength": 1,
    "Data": [
        {
            "_id": "619248d9632a4d022bf10b14",
            "email": "********@*******.***",
            "name": "",
            "contactNo": "12345676890",
            "activeStatus": true,
            "leadSource": "Website",
            "leadPerson": [
                "618cdc9f440a5c641e0a273b"
            ],
            "customerLeadId": [
                "61921f1faa24f6068ea5ef36"
            ],
            "estimaitonDate": "",
            "estimaitonSentDate": "",
            "estimaitonStatus": "Process",
            "leadInvoinceNo": "E1000003",
            "createdAt": "2021-11-15T11:47:37.300Z",
            "updatedAt": "2021-11-15T11:47:37.300Z",
            "__v": 0
        }
    ]
}

現在我正在嘗試將資訊放入 HTML 以顯示資訊。我使用UseEffect并useState從 REST api 獲取資訊。

我像這樣使用 useState const [posts, setCustomerData] = useState(); 在 useEffect 我做這樣的事情

useEffect(()=>{
    let token = localStorage.getItem('token');
    fetch('url',{
        method: 'GET',
        mode:'cors',
        headers:{
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' token,
        },
    }).then((response)=>response.json())
    .then((responseJson)=>{
        setCustomerData(responseJson.Data);
    })
},[])

并放入 HTML

    <div className="TablesCustomerWhiteBg__">
        <img src={vis} className="whiteBg__" />
        <input type="button" onClick={toggleModal} value="Add Column" className="AddColumn__" /><span><input type="text" placeholder="  &#xF002;    Search customer by name" className="SearchBox__" /></span>
    </div>
    <div className="dataTableInfos__">
        {posts.map(post=>(                              //starts here 
        <table className="displayTableInfos__">
            <tr>
                <th>Estimate #</th>
                <th>Customer Name</th>
                <th>Software Followup</th>
                <th>Status</th>
                <th>Estimate Date</th>
            </tr>
            <tr>
                <td align="center">{post.id}</td>
                <td align="center">{post.name}</td>
                <td align="center">mmm</td>
                <td align="center">{post.estimaitonStatus}</td>
                <td align="center">{post.estimaitonDate}</td>
            </tr>

        </table>
        ))}                                     //ends here
    </div>

這是我得到的錯誤。

×
TypeError: Cannot read properties of undefined (reading 'map')
DashBoard
D:/react/FrontEnd/src/DashBoard.js:129
  126 |     <img src={vis} className="whiteBg__" />
  127 |     <input type="button" onClick={toggleModal} value="Add Column" className="AddColumn__" /><span><input type="text" placeholder="  &#xF002;    Search customer by name" className="SearchBox__" /></span>
  128 | </div>
> 129 | <div className="dataTableInfos__">
      | ^  130 |     {posts.map(post=>(
  131 |     <table className="displayTableInfos__">
  132 |         <tr>
View compiled
? 19 stack frames were collapsed.
(anonymous function)
D:/react/modules/Router.js:34
  31 | if (!props.staticContext) {
  32 |   this.unlisten = props.history.listen(location => {
  33 |     if (this._isMounted) {
> 34 |       this.setState({ location });
     | ^  35 |     } else {
  36 |       this._pendingLocation = location;
  37 |     }
View compiled
? 7 stack frames were collapsed.
(anonymous function)
D:/react/FrontEnd/src/HomePage.js:32
  29 |     //alert(token);
  30 |     localStorage.setItem('userinfo', email);
  31 |     localStorage.setItem('token', token);
> 32 |     history.push('/dashboard');
     | ^  33 | }else{
  34 |     alert(responseJson.error);
  35 | }
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

請我在這里需要某種幫助，我該如何解決？為什么我會收到此錯誤？

uj5u.com熱心網友回復：

如果你看一下代碼 .useEffect 在第一次渲染之后被呼叫。當第一次渲染出現時，它會從你的 useState 中獲取未定義的資料。解決方案 1：將變數默認為空陣列

change this // [posts, setCustomerData] = useState()

對此

[posts, setCustomerData] = useState([])

如果問題仍然存在。然后嘗試為您的 API 資料使用不同的名稱，為地圖使用不同的名稱。2

標籤：反应 休息

上一篇：命令替換中的變數擴展為多個引數

下一篇：.Net6c#APi和Angular之間的通信問題