我正在嘗試在 React JS Like Facebook 等中實作類似 Photosharing 應用程式的東西。該應用程式應該從 REST api 獲取資訊，然后使用來自此 API https://instagramklone-restapi.herokuapp.com 的提要填充表例如 /api/posts/tim_girl_2。我收到此錯誤：
TypeError: posts.map is not a function
現在我很困惑。我只是在這里需要幫助。它應該從 REST api 獲取資料，然后填充為供查看的提要。
我的代碼看起來像這樣
import './Home.css';
import React, {useState, useEffect} from 'react';
const MyDashBoard = () =>{
const[posts, setPosts] = useState('');
useEffect(() =>{
let userId = localStorage.getItem('userinfo');
fetch('https://instagramklone-restapi.herokuapp.com/api/posts/' userId,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then((response)=> response.json())
.then((responseJson) =>{
setPosts(responseJson.data);
})
},[]);
return (
<div align="center">
<table className="headerTable">
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="270px">
<p align="right"/></td>
<td width="108px">
<p align="right"/>
<img border="0" src="images/735145cfe0a4.png" width="103px" height="29px"/>
</td>
<td> </td>
<td width="150px">
<p align="center"/>
<input type="image" src="images/home.png" width="27" height="25" align="right" />
</td>
<td width="135">
<p align="center"/>
<input type="image" src="images/logout.png" width="27" height="25" align="left" />
</td>
<td width="128"></td>
</tr>
</table>
</td>
</tr>
</table>
<div className="uploadImagesDiv">
<table className="postsTable">
<tr>
<td height="76">
<p align="left"/>
<textarea rows="4" name="S1" cols="73" className="textArea" />
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="file" name="file1" size="73" className="fileUploaderClass"/>
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="submit" value="Post" name="submit" className="postButton" />
</td>
</tr>
</table>
</div>
<div className="postsDiv">
{posts.map(post =>(
<table border="0" width="42%" height="600" className="feedsTable">
<tr>
<td height="3">
<p align="left"/> <b>{post.username}</b>
</td>
</tr>
<tr>
<td height="428">
<p align="center"/>
<img border="0" src={post.imgUrl} width="100%" height="100%" className="photoMain" />
</td>
</tr>
<tr>
<td>
<p align="left" /> <b>{post.posts}</b>
</td>
</tr>
</table>
))}
<p align="left"/>
</div>
</div>
);
};
export default MyDashBoard;
例如，我在這里做什么來從這個 api 獲取資料https://instagramklone-restapi.herokuapp.com/api/posts/tim_girl_2。
編輯
代碼現在看起來像這樣：
import './Home.css';
import React, {useState, useEffect} from 'react';
const MyDashBoard = () =>{
const[posts, setPosts] = useState([]);
useEffect(() =>{
let userId = localStorage.getItem('userinfo');
fetch('https://instagramklone-restapi.herokuapp.com/api/posts/' userId,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then((response)=> response.json())
.then((responseJson) =>{
setPosts(responseJson);
})
},[]);
return (
<div align="center">
<table className="headerTable">
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="270px">
<p align="right"/></td>
<td width="108px">
<p align="right"/>
<img border="0" src="images/735145cfe0a4.png" width="103px" height="29px"/>
</td>
<td> </td>
<td width="150px">
<p align="center"/>
<input type="image" src="images/home.png" width="27" height="25" align="right" />
</td>
<td width="135">
<p align="center"/>
<input type="image" src="images/logout.png" width="27" height="25" align="left" />
</td>
<td width="128"></td>
</tr>
</table>
</td>
</tr>
</table>
<div className="uploadImagesDiv">
<table className="postsTable">
<tr>
<td height="76">
<p align="left"/>
<textarea rows="4" name="S1" cols="73" className="textArea" />
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="file" name="file1" size="73" className="fileUploaderClass"/>
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="submit" value="Post" name="submit" className="postButton" />
</td>
</tr>
</table>
</div>
<div className="postsDiv">
{posts.map(post =>(
<table border="0" width="42%" height="600" className="feedsTable">
<tr>
<td height="3">
<p align="left"/> <b>{post.username}</b>
</td>
</tr>
<tr>
<td height="428">
<p align="center"/>
<img border="0" src={post.imgUrl} width="100%" height="100%" className="photoMain" />
</td>
</tr>
<tr>
<td>
<p align="left" /> <b>{post.posts}</b>
</td>
</tr>
</table>
))}
<p align="left"/>
</div>
</div>
);
};
export default MyDashBoard;
我仍然遇到相同的錯誤
uj5u.com熱心網友回復：
正如我從你的 herokuapp api 中看到的，它回傳這個：
{
"error": false,
"data": [],
"message": "posts."
}
...所以我想您需要從中獲取資料：
setPosts(responseJson.data)
編輯：為了您更好地理解：物件沒有地圖功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/314017.html
上一篇：服務發布方法的負面場景