Reactjs 使用reactstrap切换手风琴功能？

使用reactstrap文档，我创建了一个带有可折叠卡片的伪手风琴。我希望能够切换卡片，这样当我单击列表2的卡片标题时，它将打开，如果我连续单击它，它将再次关闭。如果单击列表1，列表2应按预期关闭，而列表1应打开

手风琴组件：

import React, { Fragment, useState } from 'react';
import { Collapse, CardBody, Card, CardHeader } from 'reactstrap';

const Lists = () => {
    const [isOpen, setIsOpen] = useState('');
    const [lists, setLists] = useState([
        {
            _id: 'id_abc',
            item_names: ['item 1', 'item 2', 'item 3'],
            list_name: 'List 2',
            author_name: 'Samantha Samson',
        },
        {
            _id: 'id_xyz',
            item_names: ['item 1', 'item 1', 'item 2', 'item 16'],
            list_name: 'List 1',
            author_name: 'John Johnson',
        },
    ]);

return (
    <Fragment>
        {lists.map((list) => (
            <Card key={list._id}>
                <CardHeader onClick={() => setIsOpen(list._id)}>
                    <h4>{list.list_name}</h4>
                </CardHeader>
                <Collapse isOpen={isOpen === list._id ? true : false}>
                    <CardBody>
                        <ul>
                            {list.item_names.map((item) => (
                                <li>{item}</li>
                            ))}
                        </ul>
                    </CardBody>
                </Collapse>
            </Card>
        ))}
    </Fragment>

);

并给出了标题：

onClick={handleToggle(list._id)}

但这给了很多人太多的重新加载/无限循环错误

---

我还尝试了该函数的一些细微变化，得到了相同的结果。

您已经用这个函数修复了它：

  const handleToggle = (id) => {
    if (isOpen === id) {
      setIsOpen("");
    } else {
      setIsOpen(id);
    }
  };

太棒了！你犯错误的地方是这样称呼它：

onClick={handleToggle(list._id)}

这将在每次渲染时调用该函数，因为它会更新一个状态变量，所以您将获得无限的渲染

应该是：

onClick={() => handleToggle(list._id)}

沙箱：

仅供参考： 您可以将三元运算符简化为：

isOpen={isOpen === list._id}

---

像这样重写你的

onClick

处理程序：

onClick={（）=>handleToggle（list.\u id）}

；非常感谢。

isOpen={isOpen === list._id}