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

【问题标题】：clicked button toggle all the items in the list (React)单击按钮切换列表中的所有项目（反应）
【发布时间】：2021-03-08 01:48:22
【问题描述】：

我有一组职位描述，我想隐藏每个描述的一部分，并在使用 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;

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

谁能告诉我我做错了什么？提前致谢。

【问题讨论】：

你存储一个 single 布尔值来决定是否扩展描述，称为readMore。那么您的应用如何知道要扩展哪个？这取决于您想要的行为。您是否希望一次只打开一个？还是您希望每个人都能够打开和关闭而不管其他人的状态如何？
我建议你把每一个item分离成一个独立的组件，这样可以避免你面临的问题，当组件重新渲染时它也会给你更多的性能。
@Jayce444 实际上，我希望每个人都能够打开和关闭，而不管其他人的状态如何

标签： javascript reactjs react-hooks

【解决方案1】：

您的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;

编辑：上述解决方案只允许您一次打开一个项目。如果您需要多个项目，则需要维护所有活动指数的核算。我认为Set 将是一个完美的结构：

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;

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：