Javascript 单击按钮切换列表中的所有项目（反应）

我有一个工作描述数组，我想隐藏每个描述的一部分，并在使用React钩子单击按钮时完全显示它

我正在迭代数组（由

id

和

description

组成），以将所有描述显示为组件中的列表。每个段落后面都有一个按钮，用于显示或隐藏内容

readMore

用于隐藏/显示内容和

activeIndex

用于跟踪单击的项目索引

这就是我到目前为止所做的：

import React, { useState } from "react";

const Jobs = ({ data }) => {
  const [readMore, setReadMore] = useState(false);
  const [activeIndex, setActiveIndex] = useState(null);

  const job = data.map((job, index) => {
    const { id, description } = job;
    return (
      <article key={id}>
        <p>
          {readMore ? description : `${description.substring(0, 250)}...`}
          <button
            id={id}
            onClick={() => {
              setActiveIndex(index);
              if (activeIndex === id) {
                setReadMore(!readMore);
              }
            }}
          >
            {readMore ? "show less" : "show more"}
          </button>
        </p>
      </article>
    );
  });

  return <div>{job}</div>;
};

export default Jobs;

import React，{useState}来自“React”；
const Jobs=（{data}）=>{
const[readMore，setReadMore]=useState（false）；
常量[activeIndex，setActiveIndex]=useState（null）；
const job=data.map（（作业，索引）=>{
const{id，description}=job；
返回(

{readMore？description:`${description.substring（0250）}…`}
{
setActiveIndex（索引）；
if（activeIndex==id）{
setReadMore（！readMore）；
}
}}
>
{readMore？“show less”：“show more”}

);
});
返回{job}；
};
导出默认作业；

问题是，当我单击一个按钮时，它会切换列表中的所有项目。 我只想在单击自己的按钮时显示/隐藏内容

有人能告诉我我做错了什么吗？ 提前谢谢。

试试这个

{readMore && (activeIndex === id) ? description : `${description.substring(0, 250)}...`}

---

您的

readMore

状态是完全冗余的，实际上是导致问题的原因。如果您知道

activeIndex

，那么您就有了关于要显示什么和不显示什么的所有信息

import React, { useState } from "react";

const Jobs = ({ data }) => {
  const [activeIndex, setActiveIndex] = useState(null);

  const job = data.map((job, index) => {
    const { id, description } = job;
    return (
      <article key={id}>
        <p>
          {activeIndex === index ? description : `${description.substring(0, 250)}...`}
          <button
            id={id}
            onClick={() => {
              if (activeIndex) {
                setActiveIndex(null);
              } else {
                setActiveIndex(index);
              }
            }}
          >
            {activeIndex === index ? "show less" : "show more"}
          </button>
        </p>
      </article>
    );
  });

  return <div>{job}</div>;
};

export default Jobs;

---

您可以存储一个布尔值来决定是否展开描述，称为

readMore

。那么，你的应用程序如何知道要扩展哪一个呢？这取决于你想要的行为。您希望一次只打开一个吗？或者，您希望每个项目都能够打开和关闭，而不考虑其他项目的状态吗？我建议您将每个项目分离到自己的组件中，这样可以避免您面临的问题，在组件重新渲染时，它也会给您带来更高的性能。@Jayce444实际上，我希望每个人都能够打开和关闭，而不管其他人的状态如何

import React, { useState } from "react";

const Jobs = ({ data }) => {
  const [activeIndices, setActiveIndices] = useState(new Set());

  const job = data.map((job, index) => {
    const { id, description } = job;
    return (
      <article key={id}>
        <p>
          {activeIndices.has(index) ? description : `${description.substring(0, 250)}...`}
          <button
            id={id}
            onClick={() => {
              const newIndices = new Set(activeIndices);
              if (activeIndices.has(index)) {
                newIndices.delete(index);
              } else {
                newIndices.add(index);
              }
              setActiveIndices(newIndices);
            }}
          >
            {activeIndices.has(index) ? "show less" : "show more"}
          </button>
        </p>
      </article>
    );
  });

  return <div>{job}</div>;
};

export default Jobs;