Javascript 单击时显示/隐藏列表元素，每次显示一个列表项（react应用程序）

我试图制作一个列表，当你点击标题时，它会显示/隐藏每个标题下的描述。它部分工作（当你点击一个标题时，它会显示所有的描述，当你再次点击时，它会隐藏所有的描述），但我需要它单独显示/隐藏每个项目

import React from 'react'
import styled from 'styled-components'
import girl from '../assets/steps-image.png'
import arrow from '../assets/down-arrow.svg'

class StepsSection extends React.Component{
  constructor() {
    super();
    this.state = {
      show: true
    }
  }
render() {
  return (
    <StepsStyles  className="sections">
    <Illustration />
     <Content>
       <div><span className="tag">3 easy steps</span></div>
      <h1>How it works</h1>

json静态数据位于底部：

const Steps = [
    {
      title: '1. Download Tattoo master app (dropdown)',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world. '
    },
    {
      title: '2. Enter your location',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world.'
    },
    {
      title: '3. Find your tattoo master',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world.'
    }
  ]

以下是网页： 和回购：

---

有什么想法吗？提前谢谢

如果试图通过状态中的值更改状态，请将函数作为第一个参数传递给setState，如下所示：

this.setState((state, props) => ({
  show: !state.show
}));

---

你可以用这样的东西

{Steps.map((lista, index) => (
  <details className='collapse'>
    <summary className='title'>{lista.title}</summary>
    <div className='description'>
      {lista.desc}
    </div>
  </details>
))}

{Steps.map（（lista，index）=>(
{lista.title}
{lista.desc}
))}

---

详细信息和摘要是用于折叠的HTML标记。

您需要为每个列表元素创建一个状态。然后您可以单独更改它们

首先，我要为每个

步骤

项添加一个

id

const Steps = [
    {
      id: 1,
      title: '1. Download Tattoo master app (dropdown)',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world. '
    },
    {
      id: 2,
      title: '2. Enter your location',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world.'
    },
    {
      id: 3,
      title: '3. Find your tattoo master',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world.'
    }
  ]

其次，我将我的

show

状态更改为一个对象。这样我就可以存储每个项目的id，并告诉他们它是

true

还是

false

this.state = {
  show: {}
}

最后，我将更改函数，根据其

id

更改每个项目的状态

toggleListItem(itemId) {
  this.setState((prevState) => ({
    ...prevState,
    show: {
      ...prevState.show,
      [itemId]: !prevState.show[itemId]
    }
  }))
}

<div key={lista.id} onClick={() => this.toggleListItem(lista.id)} className="dropdown"> ... </div>

toggleListItem（itemId）{
this.setState（（prevState）=>({
…国家，
展示：{
…国家电视台，
[itemId]：！prevState.show[itemId]
}
}))
}
this.toggleListItem（lista.id）}className=“dropdown”>。。。

您可以看到它在这里工作：

您可以在此处快速解释如何使用

prevState

：

---

状态正在更改，但它会一次打开所有

项。我希望它打开与用户单击的标题对应的项目。例如，如果此人单击步骤1，则仅打开编号1的隐藏描述。现在我点击数字1，它会打开所有隐藏项。使用3个不同的状态变量来显示和隐藏stepsperfect=）的描述一个简单而有效的解决方案。

this.state = {
  show: {}
}

toggleListItem(itemId) {
  this.setState((prevState) => ({
    ...prevState,
    show: {
      ...prevState.show,
      [itemId]: !prevState.show[itemId]
    }
  }))
}

<div key={lista.id} onClick={() => this.toggleListItem(lista.id)} className="dropdown"> ... </div>