实现Show More/Show Less按钮单独控制表格行高度

关键修改说明 #

• 替换全局展开状态为每个帖子独立的状态管理：用对象存储各帖子ID对应的展开状态，避免点击按钮时所有行同步展开/收起。
• 移除全局displayShowMore状态，改为每个帖子单独判断是否显示按钮：仅当当前帖子的postsCaption长度超过250时渲染按钮。
• 调整按钮点击逻辑，只切换当前帖子的展开状态，不影响其他帖子。
• 补充加载状态的正确设置，确保请求开始时显示加载提示。

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import './Home.css'
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Dependencies
import Axios from 'axios';
import { useNavigate, useLocation, useParams } from 'react-router-dom';
//Function
import VerificationCheck from "../../Functions/VerificationCheck";


const Home = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const userLoggedIn = VerificationCheck.CheckLogin();
    const loggedInUser = VerificationCheck.CheckUser();
    const [isLoading, setIsLoading] = useState(false);
    const [posts, setPost] = useState([]);
    const [statusMessage, setStatusMessage] = useState(null);
    // 用对象存储每个帖子的展开状态，键为postsID，值为布尔值
    const [expandedPosts, setExpandedPosts] = useState({});

    useEffect(() => {
        if (!userLoggedIn) {
            navigate('/Login', {
                state: {
                    previousUrl: location.pathname,
                }
            });
        }
        else {
            getAllPost();
        }
    }, [userLoggedIn]);
    
    const getAllPost = () => {
        const url = process.env.REACT_APP_Backend_URL + '/post/get-post-record';
        setIsLoading(true); // 请求开始时设置加载状态

        Axios.post(url)
        .then ((response) => {
            setPost(response.data);
            setIsLoading(false);
        })
        .catch((error) => {
            setStatusMessage("Server Side Error");
            setIsLoading(false);
        });
    }

    return (
        <>
            <Header/>
            <div className='homeBody'>
                <div className="homeForm">
                    {isLoading ?
                    <>
                        <h1>Loading...</h1>
                    </>
                    :
                    <>
                        {statusMessage ? 
                        <>
                            <h1>{statusMessage}</h1>
                        </>
                        :
                        <>
                            {posts.map(uploadedPost => {
                                // 判断当前帖子是否需要显示展开按钮
                                const needShowButton = uploadedPost.postsCaption.length > 250;
                                // 获取当前帖子的展开状态，默认未展开（false）
                                const isExpanded = expandedPosts[uploadedPost.postsID] || false;

                                return (
                                    <table key={uploadedPost.postsID}>
                                        <tbody className="postData">
                                            <tr><td><a><h1 className="title">{uploadedPost.postsTitle}</h1></a></td></tr>
                                            <tr>
                                                <td>
                                                    <div className="authorDate">
                                                        <h2 className="author">Author: {uploadedPost.postsAuthor}</h2>
                                                        <h3 className="datetime">{uploadedPost.createdOn}</h3>
                                                    </div>
                                                </td>
                                            </tr>
                                            {/* 仅当内容长度超过250时渲染按钮 */}
                                            {needShowButton && (
                                                <tr><td className="btn">
                                                    <button 
                                                        className="btn" 
                                                        onClick={() => {
                                                            // 仅切换当前帖子的展开状态
                                                            setExpandedPosts(prev => ({
                                                                ...prev,
                                                                [uploadedPost.postsID]: !isExpanded
                                                            }));
                                                        }}
                                                    >
                                                        {isExpanded ? "Show less" : "Show more"}
                                                    </button>
                                                </td></tr>
                                            )}
                                            <tr><td>
                                                <p className="caption">
                                                    {isExpanded 
                                                        ? uploadedPost.postsCaption 
                                                        : `${uploadedPost.postsCaption.substring(0, 250)}...`}
                                                </p>
                                            </td></tr>
                                        </tbody>
                                    </table>
                                )
                            })}
                        </>
                        }
                    </>
                    }
                </div>
            </div>
            <Footer />
        </>
    );
}

export default Home;

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