React JS如何将REST API返回的数据渲染到feeds流对应div区域

核心修改点 #

• 新增useState状态存储接口返回的帖子列表，原来你拿到的接口数据只存在useEffect的局部变量里，组件渲染层无法访问，存入状态后状态更新会自动触发组件重新渲染
• 将原来写死的单条信息流结构，替换为遍历帖子列表循环渲染的动态结构
• 替换静态的用户名、图片、内容为接口返回的对应字段

修改后完整代码 #

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

const MyDashBoard = () =>{
    // 新增状态存储帖子列表，初始值为空数组
    const [posts, setPosts] = useState([]);
    // 新增loading状态可选，用于请求过程中显示加载提示
    const [loading, setLoading] = useState(true);

    // 注意：如果localStorage存的是用户对象JSON字符串，需要先JSON.parse再取id字段
    // 比如：const userId = JSON.parse(localStorage.getItem('userinfo'))?.id
    let userId = localStorage.getItem('userinfo');

    useEffect(() =>{
        if(!userId) return;
        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)
            // 示例假设接口返回的是帖子数组，每个元素包含username、imgUrl、post字段
            setPosts(responseJson);
            setLoading(false);
        }).catch(err => {
            console.error('请求帖子失败', err);
            setLoading(false);
        })
    },[userId]) // 把userId加入依赖数组，用户切换时会重新请求

    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" alt="logo"/>
                                </td>
                                <td>&nbsp;</td>
                                <td width="150px">
                                <p align="center"/>
                                <input type="image" src="images/home.png" width="27" height="25" align="right" alt="首页"/>
                                </td>
                                <td width="135">
                                    <p align="center"/>
                                    <input type="image" src="images/logout.png" width="27" height="25" align="left" alt="退出"/>
                                </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">
                    {loading ? <p>加载中...</p> : 
                    posts.length === 0 ? <p>暂无动态</p> :
                    posts.map((postItem, index) => (
                        // 每个动态对应一个feedsTable，key最好用postItem.id等唯一值，这里暂时用索引兜底
                        <table border="0" width="42%" height="600" className="feedsTable" key={postItem.id || index}>
                            <tr>
                                <td height="3">
                                    <p align="left"/>&nbsp; <b>{postItem.username}</b>
                                </td>
                            </tr>
                            <tr>
                                <td height="428">
                                <p align="center"/>
                                <img border="0" src={postItem.imgUrl} width="100%" height="100%" className="photoMain" alt="帖子图片"/>
                                </td>
                            </tr>
                            <tr>
                               <td>
                                   <p align="left" />&nbsp; <b>{postItem.post}</b>
                                </td> 
                            </tr>
                        </table>
                    ))
                    }
                    <p align="left"/>&nbsp;
                </div>
        </div>
    );
};

export default MyDashBoard;

注意事项 #

• 请根据你的接口实际返回结构调整setPosts的取值逻辑，如果接口返回的帖子列表是嵌套在responseJson的某个字段下，要对应取值
• 给img标签新增了alt属性，符合可访问性规范，你可以根据实际需求修改
• 如果需要实现发布帖子后刷新列表，可以在发布成功后重新调用一次接口请求更新posts状态

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