Javascript ReactJS：如何维护循环中多个ReadMore/ReadLess按钮的索引

我有一个数组-

    var profiles = [
    {
        name: "Name1",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name2",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name3",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name4",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    }
];

我想截断描述字符串。只有前25个字符与“阅读更多”按钮一起可见。单击“阅读更多”时，状态应展开并显示完整的字符串；单击“阅读更少”时，段落应折叠

问题是当我单击

阅读更多

时，它会触发对循环中所有段落的单击，所有段落一起展开/折叠，而不是单击ReadMore/ReadLess的段落

下面是我的代码

const ProfileGrid = (props) => {
    const [textRevealed, toggleText] = useState(false);
    const truncLength = 25;
    return (
        <>
          {props.profiles.map((profile,index) => (
              <p>{profile.name}</p>
              <p>{textRevealed ? profile.profile_description : 
                 profile.description.substring(0, truncLength)}...
                            <Button onClick={() =>  toggleText(!textRevealed)}>
                                 {textRevealed ? 'Read Less' : 'Read more'}
                            </Button>
                }</p>
        </>
   )

}

const ProfileGrid=（道具）=>{
const[textExposed，toggleText]=useState（false）；
常数truncLength=25；
返回(
{props.profiles.map（（profile，index）=>(
{profile.name}

{textExposed？profile.profile_说明：
profile.description.substring（0，truncLength）}。。。
toggleText（！textExposed）}>
{textExposed？'Read Less'：'Read more'}
}

)
}

我不知道如何准确地维护索引，因此当单击“阅读更多”时，只有单击的索引才会展开/折叠

---

谢谢

通过将折叠转换为ReactNode，将其设置为独立语句，我的代码如下所示

const truncLength = 25
const ProfileGridItem = ({ name, description = '' }) => {
  const [isCollapse, setIsCollapse] = useState(false)

  return (
    <div>
      <p>{name}</p>
      <p>
        {description.substring(0, isCollapse ? truncLength : undefined)}...
        <Button onClick={() => setIsCollapse(isCollapse => !isCollapse)}>
          {isCollapse ? 'Read Less' : 'Read more'}
        </Button>
      </p>
    </div>
  )
}

const ProfileGrid = props => (
  <>
    {props.profiles.map((profile, index) => (
      <ProfileGridItem key={index} {...profile} />
    ))}
  </>
)

const truncLength=25
const ProfileGridItem=（{name，description=''}）=>{
const[isCollapse，setIsCollapse]=useState（false）
返回(
{name}


{description.substring（0，isCollapse？truncLength:未定义）}。。。
setIsCollapse（isCollapse=>！isCollapse）}>
{isCollapse？'Read Less'：'Read more'}

)
}
const ProfileGrid=props=>(
{props.profiles.map（（profile，index）=>(
))}
)

通过将collapse转换为ReactNode，将其设置为独立语句，我的代码如下所示

const truncLength = 25
const ProfileGridItem = ({ name, description = '' }) => {
  const [isCollapse, setIsCollapse] = useState(false)

  return (
    <div>
      <p>{name}</p>
      <p>
        {description.substring(0, isCollapse ? truncLength : undefined)}...
        <Button onClick={() => setIsCollapse(isCollapse => !isCollapse)}>
          {isCollapse ? 'Read Less' : 'Read more'}
        </Button>
      </p>
    </div>
  )
}

const ProfileGrid = props => (
  <>
    {props.profiles.map((profile, index) => (
      <ProfileGridItem key={index} {...profile} />
    ))}
  </>
)

const truncLength=25
const ProfileGridItem=（{name，description=''}）=>{
const[isCollapse，setIsCollapse]=useState（false）
返回(
{name}


{description.substring（0，isCollapse？truncLength:未定义）}。。。
setIsCollapse（isCollapse=>！isCollapse）}>
{isCollapse？'Read Less'：'Read more'}

)
}
const ProfileGrid=props=>(
{props.profiles.map（（profile，index）=>(
))}
)

最简单的方法是使用

组件的电源

这意味着您应该
将每个项目分解成相应的独立组件。

因此，您可以轻松控制每个项目的状态

const [isShow, setShowHide] = React.useState(false); 


const ProfileGrid=（道具）=>{
返回(
{props.profiles.map（（profile，)）=>(
))}
);
};
const ProfileItem=（道具）=>{
常数truncLength=25；
常量[isShow，setShowHide]=React.useState（false）；
返回(
{props.name}


{" "}
{isShow
？道具说明
：props.description.substring（0，truncLength）}{“}
...
setShowHide（（上一个）=>！上一个）}>
{isShow？“少读”：“多读”}

);
};
变量配置文件=[
{
名称：“名称1”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
},
{
名称：“名称2”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
},
{
姓名：“姓名3”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
},
{
名称：“名称4”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
}
];
ReactDOM.render（，document.getElementById（'root'）；
最简单的方法是使用
组件的电源

这意味着您应该
将每个项目分解成相应的独立组件。

因此，您可以轻松控制每个项目的状态

const [isShow, setShowHide] = React.useState(false); 


const ProfileGrid=（道具）=>{
返回(
{props.profiles.map（（profile，)）=>(
))}
);
};
const ProfileItem=（道具）=>{
常数truncLength=25；
常量[isShow，setShowHide]=React.useState（false）；
返回(
{props.name}


{" "}
{isShow
？道具说明
：props.description.substring（0，truncLength）}{“}
...
setShowHide（（上一个）=>！上一个）}>
{isShow？“少读”：“多读”}

);
};
变量配置文件=[
{
名称：“名称1”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
},
{
名称：“名称2”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
},
{
姓名：“姓名3”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
},
{
名称：“名称4”，
描述：“Lorem ipsum Door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
}
];
ReactDOM.render（，document.getElementById（'root'）；

你的答案很好。我有同样的想法，但OP的代码花费了我太多的时间，无法在代码片段中重现：（.无论如何，+1If