React调用REST API渲染列表报posts.map is not a function求解

错误根本原因 #

posts.map is not a function 错误的核心是调用map方法的posts变量不是数组类型，你两次调整都存在问题：

• 初始版本：useState('') 把posts初始值设为字符串，第一次渲染时字符串没有map方法直接报错
• 调整版本：虽然初始值改成了空数组，但你直接把接口返回的整个外层对象赋值给了posts，而你调用的接口返回的动态数组是存放在data字段里的，所以赋值后posts依然是对象，调用map自然报错

解决步骤 #

1. 正确提取接口返回的数组

你使用的接口返回结构固定为：

{
  "success": true,
  "data": [/* 动态列表数组 */]
}

所以需要从返回值里取data字段赋值给posts，而不是直接赋值整个responseJson。

2. 增加容错处理

防止接口异常返回非数组结构时页面崩溃，调用map前先判断posts是否为数组，或者加空值兜底。

3. 校验userId取值逻辑

确认localStorage.getItem('userinfo')拿到的是正确的用户名字符串，如果你之前存userinfo的时候是存的JSON序列化后的用户对象，需要先反序列化再取对应的用户名字段，避免url拼接错误导致接口404。

修正后完整代码 #

import './Home.css';
import React, {useState, useEffect} from 'react';

const MyDashBoard = () =>{
    // 初始值设为空数组
    const[posts, setPosts] = useState([]);

    useEffect(() =>{
        let userId =  localStorage.getItem('userinfo');
        // 如果userinfo是序列化后的对象，需要加这行：userId = JSON.parse(userId).username （替换成你实际的用户名字段）
        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) =>{
            // 正确提取data字段的数组赋值，异常时兜底为空数组
            setPosts(responseJson.data || []);
        }).catch(err => {
            // 请求异常时兜底，避免赋值非数组内容
            console.error('请求动态失败：', err)
            setPosts([])
        })
    },[]);

    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，兜底显示暂无动态 */}
                    {Array.isArray(posts) && posts.length > 0 ? posts.map((post, index) =>(
                        <table border="0" width="42%" height="600" className="feedsTable" key={index}>
                        <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>暂无动态</p>}
                    <p align="left"/>&nbsp;
                </div>
        </div>
    );
};

export default MyDashBoard;

内容的提问来源于stack exchange，提问作者Blaq