TypeError: posts.map is not a function, trying to populate fields from a REST api

Question

我正在尝试在像 Facebook 等 React JS 中实现类似照片共享应用程序之类的东西。 该应用程序应该从 REST api 获取信息，然后使用 API https://instagramklone-restapi.herokuapp.com/api/posts/tim_girl_2 中的提要填充 Table。我收到了这个错误：

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>&nbsp;</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"/>&nbsp; <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" />&nbsp; <b>{post.posts}</b>
                            </td> 
                        </tr>
                        
                    </table>
                    ))}
                    <p align="left"/>&nbsp;
                </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>&nbsp;</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"/>&nbsp; <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" />&nbsp; <b>{post.posts}</b>
                            </td> 
                        </tr>
                        
                    </table>
                    ))}
                    <p align="left"/>&nbsp;
                </div>
        </div>
    );
};

export default MyDashBoard;

我仍然遇到同样的错误

Answer 1

正如我从你的 herokuapp api 中看到的那样，它 returns 是这样的：

{
"error": false,
"data": [],
"message": "posts."
}

...所以我想您需要其中的数据：

setPosts(responseJson.data)

编辑：为了更好地理解：对象没有映射功能。