React JS中多文本项Show More/Show Less功能异常问题求助

我来帮你搞定这个问题！你遇到的问题根源在于所有文本项共用了同一个全局状态，导致点击第二个项时，会影响第一个项的展开状态。咱们一步步来修复它：

问题分析 #

你当前用了showStatus（全局布尔值）和showMore（记录当前点击的id）两个状态来控制所有文本的展开/收起。当你点击第二个项时：

• setShowMore(id)会把showMore改成第二个项的id
• setShowStatus(!showStatus)会把全局的展开状态取反
  这就导致第一个项的isTestOpen（result.id === showMore）变成false，同时showStatus也变成false，所以第一个项收起；而第二个项虽然isTestOpen是true，但showStatus是false，所以也不会展开。

解决方案：给每个项单独管理展开状态 #

我们可以用一个对象状态来记录每个文本项的展开状态，这样每个项的状态都是独立的，不会互相影响。

修改后的完整代码 #

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  // 用对象存储每个id的展开状态，初始为空（所有项都收起）
  const [expandedIds, setExpandedIds] = useState({});
  
  const dummyData = [
    {
      id: 1,
      AbstractData: "The aim of this study was to determine in vitro the potential of Aloe Vera juice as a skin permeation enhancer;a secondary aim was to probe the extent to which Aloe Vera itself permeates the skin. Saturated solutions of caffeine, colchicine, mefenamic acid, oxybutynin, and quinine were prepared at 32 degrees C in Aloe Vera juice and water (control) and used to dose porcine ear skin 32 degrees C in Aloe Vera juice and water (control) and used to dose porcine ear skin 32 degrees C in Aloe Vera juice and water (control) and used to dose porcine ear skin…"
    },
    {
      id: 2,
      AbstractData: "The aim of this study was to determine in vitro the potential of Aloe Vera juice as a skin permeation enhancer;a secondary aim was to probe the extent to which Aloe Vera itself permeates the skin. Saturated solutions of caffeine, colchicine, mefenamic acid, oxybutynin, and quinine were prepared at 32 degrees C in Aloe Vera juice and water (control) and used to dose porcine ear skin…"
    },
    {
      id: 3,
      AbstractData: "The aim of this study was to determine in vitro the potential of Aloe Vera juice as a skin permeation enhancer;a secondary aim was to probe the extent to which Aloe Vera itself permeates the skin. Saturated solutions of caffeine, colchicine, mefenamic acid, oxybutynin, and quinine were prepared at 32 degrees C in Aloe Vera juice and water (control) and used to dose porcine ear skin…"
    }
  ];

  // 切换指定id项的展开状态
  const handleShow = (id) => {
    setExpandedIds(prevState => ({
      ...prevState,
      [id]: !prevState[id] // 翻转当前项的状态，不影响其他项
    }));
  };

  return (
    <div className="abstract-card">
      {dummyData.map((result) => {
        // 判断当前项是否展开
        const isExpanded = expandedIds[result.id];
        return (
          <div key={result.id}>
            <div className="card-body pb-3 px-4 pt-3">
              <h6 className="fs-12 fw-bold mb-0 pb-2">Abstract</h6>
              <p className="mb-0 fw-normal text-color11">
                {isExpanded ? result.AbstractData : `${result.AbstractData.substring(0, 300)}...`}
              </p>
              <p 
                className="text-color5 fs-13 pt-2 mb-0" 
                onClick={() => handleShow(result.id)} 
                style={{ cursor: "pointer", color: "blue" }}
              >
                {isExpanded ? "Show less..." : "Show more…"}
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

关键修改点 #

1. 状态设计优化：把原来的showStatus和showMore合并成expandedIds对象，每个键对应文本项的id，值是布尔值表示是否展开。
2. 点击逻辑独立：handleShow函数只修改当前点击项的状态，通过展开前状态（prevState）来保证不会影响其他项的状态。
3. 渲染逻辑简化：直接通过expandedIds[result.id]判断当前项是否展开，不需要再组合多个状态，逻辑更清晰。

这样修改后，每个文本项的展开/收起状态都是独立的，点击任何一个项都不会影响其他项的状态啦！

内容的提问来源于stack exchange，提问作者Harshan