React中如何单独显示/隐藏动态渲染数据数组内的单个指定元素

AI 小北

2026-9-26

问题根源

你所有FAQ项共用了同一个布尔类型的展开状态，只要状态变更所有项的展示判断都会同步生效，所以才会出现点一个全展开的情况。

修复方案

把状态改为存储当前展开项的唯一标识（这里先用索引演示，生产环境建议给每条数据加专属id替代索引），点击时只更新当前点击项的匹配状态即可。

修复后完整代码

import React, { useState } from 'react';
import { Container, Row } from 'react-bootstrap';
import { personalFaq } from '../../questionData/personalFaq';

const Faq = () => {
    // 存储当前展开项的索引，初始为null代表无展开项
    const [activeIndex, setActiveIndex] = useState(null);
    // 点击时传入当前项索引，匹配则关闭，不匹配则切换为当前索引
    const handleClick = (index) => {
        setActiveIndex(activeIndex === index ? null : index);
    };
        
    const renderQuestion = (question, index) => {
        // 判断当前项是否为展开状态
        const isActive = activeIndex === index;
        return (
            <div key={index}>
                <p>
                    <span onClick={() => handleClick(index)}>
                        {!isActive ? (<i className="fas fa-angle-down m-1"></i>) : (<i className="fas fa-angle-up"></i>)}
                    </span>
                    {question.question}
                </p>
                {isActive && (<p>{question.answer}</p>) }
            </div>
        )
    }

    return(
        <Container>
            <Container>
                <Container>
                    <h1>FAQ</h1>
                    <Row>
                        {personalFaq.map(renderQuestion)}
                    </Row>
                </Container>
            </Container>
        </Container>
    )
}

export default Faq;