基于ReactJS实现单状态文本切换功能的问题求助

我正在开发一个单组件切换模块，已完成列表数据填充，但遇到功能问题：希望点击对应按钮时切换显示“SHOW”或“HIDE”。我使用数组类型的state实现，但需要技术支持，以下是我的代码：

import { useState } from "react";

const data = [{
    "postId": 1,
    "id": 1,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
}, {
    "postId": 2,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
}, {
    "postId": 3,
    "id": 3,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},];
export default function Test() {
    const [show, setShow] = useState([]);
    console.log('show ==> ', show);
    return (
        <div>
            {data.map((item, i) => (
                <div key={i}>
                    <button onClick={() => {
                        if (show.includes(i)) {
                            setShow(prev => prev.filter(id => id !== i));
                        } else {
                            setShow(prev => [...prev, i]);
                        }
                    }}>Toggle</button>
                    {show.includes(i) ? 'SHOW' : 'HIDE'}
                    <hr />
                </div>
            ))}
        </div>
    );
}

问题分析与解决方案 #

你的代码逻辑本身可运行，但存在潜在问题：点击事件中直接使用show.includes(i)依赖当前渲染周期的show值，而React的state更新是异步的，极端场景下可能导致状态不同步。更稳妥的方式是在setShow的回调函数内处理状态判断，确保基于最新的state进行更新。

另外，用数组存储索引的方式没问题，但如果数据的id是唯一值，建议用item.id替代数组索引i，避免数据顺序变化时出现状态错乱。

修正后的代码 #

import { useState } from "react";

const data = [{
    "postId": 1,
    "id": 1,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
}, {
    "postId": 2,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
}, {
    "postId": 3,
    "id": 3,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},];
export default function Test() {
    const [showIds, setShowIds] = useState([]);

    const toggleShow = (itemId) => {
        setShowIds(prevIds => {
            if (prevIds.includes(itemId)) {
                return prevIds.filter(id => id !== itemId);
            } else {
                return [...prevIds, itemId];
            }
        });
    };

    return (
        <div>
            {data.map((item) => (
                <div key={item.id}>
                    <button onClick={() => toggleShow(item.id)}>Toggle</button>
                    {showIds.includes(item.id) ? 'SHOW' : 'HIDE'}
                    <hr />
                </div>
            ))}
        </div>
    );
}

关键优化点 #

• 将状态判断逻辑移到setShowIds的回调函数中，确保每次更新都基于最新的state，避免异步更新导致的状态不一致。
• 使用数据本身的id作为状态标识，替代数组索引，提升代码鲁棒性，避免数据顺序变化引发的状态错乱。
• 提取toggleShow函数，让代码结构更清晰，便于后续维护。

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