Javascript 反应-仅切换一个按钮，而不是全部按钮

我有一个应用程序，它从API中呈现城市，在每个城市下面都应该有一个按钮来显示这个城市的描述。现在，当我单击一个按钮时，所有按钮都会更改文本并显示描述组件

我看到了几个类似的问题，我知道，我可能应该使用索引来告诉单击哪个按钮应该工作，但是我在将其应用到代码中时遇到了问题

class CitiesList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            opened: false,
        }
        this.toggleButton = this.toggleButton.bind(this);
    };

    toggleButton() {
        const {opened} = this.state;
        this.setState({
            opened: !opened,
        })
    }


    render() {

        const items = this.props.cities.map((data, index) => (
            <div key={index}>
                <h2>{data.city}</h2>
                <p>PM 2.5 value: {data.value} {data.unit}</p>
                {this.state.opened ? <Button variant="outlined" color="primary" size="small" onClick={this.toggleButton}>Hide city description</Button> : <Button variant="outlined" color="primary" size="small" onClick={this.toggleButton}>Show city description</Button>}
                {this.state.opened && <CityDescription/>}

            </div>
        ));
        return (
            <div>
                <div>
                    {items}
                </div>
            </div>
        )
    }
}

class CitiesList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开：错，
}
this.toggleButton=this.toggleButton.bind（this）；
};
切换按钮（）{
const{opened}=this.state；
这是我的国家({
打开：！打开，
})
}
render（）{
const items=this.props.cities.map（（数据、索引）=>(
{data.city}
PM2.5值：{data.value}{data.unit}

{this.state.opened？隐藏城市描述：显示城市描述}
{this.state.opened&}
));
返回(
{items}
)
}
}

在CityDescription组件中，我现在只有：

class CityDescription extends React.Component {

    render() {
        return (
            <div>
                description
            </div>
        )
    }
}

类CityDescription扩展了React.Component{
render（）{
返回(
描述
)
}
}

---

提前感谢您的帮助

每个城市都需要

打开
状态。您可以通过保留对象数组来实现这一点，每个对象将包含如下内容：
{id:，opened:}
，正如@Muhammad所提到的，您只需做少量更改即可实现这一点

下面的代码应该可以工作：

class CitiesList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            opened: false,
        }
    };

    toggleButton = (index) => {
        const {opened} = this.state;
        this.setState({
            opened: {
              ...opened,
              [index]: !opened[index]
            }
        })
    }


    render() {
        const { opened } = this.state;
        const items = this.props.cities.map((data, index) => (
            <div key={index}>
                <h2>{data.city}</h2>
                <p>PM 2.5 value: {data.value} {data.unit}</p>
                {opened[index] ? <Button variant="outlined" color="primary" size="small" onClick={() => this.toggleButton(index)}>Hide city description</Button> : <Button variant="outlined" color="primary" size="small" onClick={() => this.toggleButton(index)}>Show city description</Button>}
                {opened[index] && <CityDescription/>}

            </div>
        ));
        return (
            <div>
                <div>
                    {items}
                </div>
            </div>
        )
    }
}

class CitiesList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开：错，
}
};
toggleButton=（索引）=>{
const{opened}=this.state；
这是我的国家({
打开：{
…打开，
[索引]：！已打开[索引]
}
})
}
render（）{
const{opened}=this.state；
const items=this.props.cities.map（（数据、索引）=>(
{data.city}
PM2.5值：{data.value}{data.unit}

{打开的[index]？this.toggleButton（index）}>隐藏城市描述：this.toggleButton（index）}>显示城市描述}
{打开[索引]&&}
));
返回(
{items}
)
}
}
拉比·贾哈的解决方案是可行的，但就在几分钟前，我用了不同的方式

在
城市列表中
我只留下了

const items = this.props.cities.map((data, index) => (
            <div key={index}>
                <h2>{data.city}</h2>
                <p>PM 2.5 value: {data.value} {data.unit}</p>
                <CityDescription/>
            </div>
        ));

const items=this.props.cities.map（（数据、索引）=>(
{data.city}
PM2.5值：{data.value}{data.unit}

));

剩下的我转到了
CityDescription
组件，它也可以工作
 您正在设置真/假标志以显示/隐藏描述，因此，您的状态不知道要显示哪个描述。您可以做的是，在该州设置映射城市的索引。例如，如果要显示2号城市的描述，请在状态中将showIndex设置为2，然后可以有条件地呈现描述。