多个阅读更多按钮同时工作答案

【问题标题】：Multiple readmore buttons working at the same time多个阅读更多按钮同时工作
【发布时间】：2022-01-14 12:00:10
【问题描述】：

早安。

我正在尝试对来自 firestore 的文本使用“阅读更多”按钮

<section className="escritos">
  {escritos.map(escrito => {
    return (
      <div>
        <p>
          Autor: <strong>{escrito.autor}</strong>
        </p>
        <p>
          {" "}
          Título: <strong>{escrito.titulo}</strong>
        </p>
        <div id="obras">
          {" "}
          {readmore
            ? parse(escrito.escrito)
            : parse(escrito.escrito.substring(0, 200))}
          <button id="readmore" onClick={() => setReadmore(!readmore)}>
            {readmore ? "ler menos" : "ler mais"}
          </button>
          <Link to="#beginning">
            <BsFillArrowUpCircleFill />
          </Link>
        </div>
        <hr />
      </div>
    );
  })}
</section>

它正在工作。但它同时适用于所有按钮。

我已经尝试过使用react-read-more，但是因为我必须使用parse(escrito.escrito) 来删除html 标签，所以出现了错误。删除解析，它可以工作，但显示标签。

我相信它与地图有关，但我还没有能够解决它。

这里是 site，如果有帮助，这里是 repository。

提前感谢您的关注和时间。

【问题讨论】：

您应该将键设置为映射的元素。但我不确定这是否会解决这个问题
嘿费兰。我刚刚听从了你的建议和 raqibrasheed 的建议。但按钮仍然同时工作。

标签： javascript reactjs map-function

【解决方案1】：

由于您希望将readmore 状态应用于各个框，您可以在状态中存储一个数组并检查是否设置了id，但我会选择（在我看来）更简单的方法：

将您的块提取到自己的组件中，该组件具有自己的状态readmore，如下所示：

<section className="escritos">
  {escritos.map(escrito => (
     <Escrito escrito={escrito} key={escrito.id} />
   ))}
</section>

// Escrito.jsx
const Escrito = ({escrito}) => {
    const [readmore, setReadmore] = useState(false);
    return (
      <div>
        <p>
          Autor: <strong>{escrito.autor}</strong>
        </p>
        <p>
          {" "}
          Título: <strong>{escrito.titulo}</strong>
        </p>
        <div id="obras">
          {" "}
          {readmore
            ? parse(escrito.escrito)
            : parse(escrito.escrito.substring(0, 200))}
          <button id="readmore" onClick={() => setReadmore(!readmore)}>
            {readmore ? "ler menos" : "ler mais"}
          </button>
          <Link to="#beginning">
            <BsFillArrowUpCircleFill />
          </Link>
        </div>
        <hr />
      </div>
    );
}

export default Escrito;

由于每个组件现在都有自己的状态，这应该是您想要的行为。

【讨论】：

完美！非常感谢！

【解决方案2】：

从escritos.map(escrito => {JSX}) 返回的父元素应包含具有唯一值的键属性。阅读更多here

【讨论】：

感谢您的回答和链接。我已将“key”道具按如下<section className="escritos"> {escritos.map(escrito => { return ( <div key={escrito.id}> <p> ... 放置，但按钮仍在同时工作。