javascript - 如何使 react-collapsed (useCollapse) 工作在地图中？

Question

我已经实现了 react-collapsed 库来使折叠按钮起作用。我需要在循环内实现这个按钮，但我没有找到一种方法让它在循环内正常工作。如果我按 1 按钮展开 1 个部分，它会展开循环中的每个部分，所以它不能正常工作。

import React from "react";
import AllIcons from "../../ui/icons/all-icons";
import TableSellDataCard from "./TableSellDataCard";
import useCollapse from 'react-collapsed';

const TableContent = ({ data, columns, }) => {
    const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();

    return (
        <>
            {data.map((item, index) => {
                return (
                    <div key={index}>
                        <div className="flex px-5 border-b border-gray-form py-2" data-reservation-id={item.id}>
                            {columns.map(() => {
                                return (
                                    <div>
                                        <button className="accordion" {...getToggleProps()}>
                                            {isExpanded ? <AllIcons name="AccordeonArrow" /> : <AllIcons name="AccordeonArrowUp" />}
                                        </button>
                                    </div>
                                );
                            })}
                        </div>
                        <section {...getCollapseProps()}><TableSellDataCard /></section>
                    </ div>
                );
            })}
        </>
    );
};

export default TableContent;

我有一个按钮可以切换该部分，但它会扩展循环内的所有部分。我需要让它工作。按钮 1 仅打开部分 1，按钮 2 仅打开部分 2。

标签： javascriptreactjsloopsreact-hooksaccordion