使用react-strap切换同时打开所有切换

Question

当我单击一个特定的按钮时，我的切换开关同时打开所有包装纸，怎么了？

const SomeData = ({ data, dayNumber }, props) => {
  const Exams = () => {
    const listExams = data.map((item) => (
      <Fragment>
        <Wrap key={item.id}>
          <WrapCard userID={item.userID}>
            <Button color="light" size="lg" block onClick={toggle} style={{ marginBottom: "1rem" }</Button>
            <Collapse isOpen={isOpen}>
              <Card></Card>
            </Collapse>
          </WrapCard>
        </Wrap>
      </Fragment>
    ));
    return listExams;
  };
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
};

Answer 1

检查您渲染的HTML。您将看到数据中每个项目的代码块：

     <Fragment>
        <Wrap key="someID">
          <WrapCard userID="someotherID">
            <Button color="light" size="lg" block onClick={toggle} style={{ marginBottom: "1rem" }</Button>
            <Collapse isOpen=!!---SAME VALUE HERE---!!
              <Card></Card>
            </Collapse>
          </WrapCard>
        </Wrap>
      </Fragment>

（HTML中上面的某些文本看起来与我键入的内容有所不同，我只解决了其中的一部分）

问题是我放入的---SAME VALUE HERE---。它们都引用相同的isOpen。因此，您需要在状态中具有多个值，每个值对应一个数据。我假设他们有一个唯一的ID。因此您可以使用为空对象的状态，并在将其打开时：setIsOpen({...isOpen, item.id: true})和在将其关闭时将其关闭setIsOpen({...isOpen, item.id: false})然后，在评估它是否打开时，请检查isOpen [item.id]是否为定义并且为真（在这种情况下没有关系，但是在检查伪造的值时要注意undefined与false）。因此，它看起来像<Collapse isOpen={isOpen[item.id]}>可以正常工作，因为如果项目为undefined或false，则您希望将其关闭。

如果您希望默认状态为打开，则将无法使用。然后，您将必须<Collapse isOpen={typeof isOpen[item.id] === 'undefined' || isOpen[item.id] === true}>。也将有更优雅的可选链接答案。