IT技术 - 如何在数组映射中正确显示可折叠内容？ - 吾爱随笔录

如何在数组映射中正确显示可折叠内容？

IT技术 javascript reactjs

2021-05-26 11:08:25

所以我制作了一个对象数组并映射了该数组。我也做了一个简单的可折叠的。问题是，可折叠装置无法正常工作。它应该只显示用户点击的内容。即，当用户单击属于 John Doe 的按钮时，可折叠组件应显示属于他的状态。我的代码发生了什么，它显示了每个人的状态。我试过 key={index} 但仍然没有结果。

到目前为止，这是我的代码...

import { useState } from "react";

const App = () => {
  const [showCollapsible, setShowCollapsible] = useState(false);

  const myDatas = [
    {
      id: 1,
      fullName: "John Doe",
      age: 28,
      status: "On Duty",
    },
    {
      id: 2,
      fullName: "Jane Doe",
      age: 27,
      status: "Rest",
    },
    {
      id: 3,
      fullName: "James Doe",
      age: 32,
      status: "Take a leave",
    },
  ];

  return (
    <div>
      {myDatas.map((data, index) => {
        return (
          <div>
            <p>{data.fullName}</p>
            <p>{data.age}</p>
            <button
              key={index}
              onClick={() => setShowCollapsible(!showCollapsible)}
            >
              Status
            </button>
            {showCollapsible && <div>{data.status}</div>}
          </div>
        );
      })}
    </div>
  );
};

export default App;

1个回答

您正在使用相同的单个布尔状态来切换所有可折叠的 div。相反，存储一些唯一标识映射元素的状态，如数据的id属性。使用 id 检查 div 是否应该折叠或可见。

const App = () => {
  const [showCollapsible, setShowCollapsible] = useState({});

  const myDatas = [
    {
      id: 1,
      fullName: "John Doe",
      age: 28,
      status: "On Duty"
    },
    {
      id: 2,
      fullName: "Jane Doe",
      age: 27,
      status: "Rest"
    },
    {
      id: 3,
      fullName: "James Doe",
      age: 32,
      status: "Take a leave"
    }
  ];

  const toggleCollapsable = (id) => () => {
    setShowCollapsible((set) => ({
      ...set,
      [id]: !set[id]
    }));
  };

  return (
    <div>
      {myDatas.map((data) => {
        return (
          <div>
            <p>{data.fullName}</p>
            <p>{data.age}</p>
            <button onClick={toggleCollapsable(data.id)}>Status</button>
            {showCollapsible[data.id] && <div>{data.status}</div>}
          </div>
        );
      })}
    </div>
  );
};

抽象一个Collapsible管理该状态的组件会更干净一些。

const CollapsibleDiv = ({ children }) => {
  const [showCollapsible, setShowCollapsible] = useState(false);

  return (
    <>
      <button onClick={() => setShowCollapsible((show) => !show)}>
        Status
      </button>
      {showCollapsible && children}
    </>
  );
};

const App = () => {
  const myDatas = [
    {
      id: 1,
      fullName: "John Doe",
      age: 28,
      status: "On Duty"
    },
    {
      id: 2,
      fullName: "Jane Doe",
      age: 27,
      status: "Rest"
    },
    {
      id: 3,
      fullName: "James Doe",
      age: 32,
      status: "Take a leave"
    }
  ];

  return (
    <div>
      {myDatas.map((data) => {
        return (
          <div>
            <p>{data.fullName}</p>
            <p>{data.age}</p>
            <CollapsibleDiv>
              <div>{data.status}</div>
            </CollapsibleDiv>
          </div>
        );
      })}
    </div>
  );
};

其它你可能感兴趣的问题

上一篇变量没有在 Reactjs 中取变量的初始值下一篇React Docusign Clickwrap 凭证