Javascript 禁用按钮onClick in React，但仅对索引中的一个元素执行

在我的应用程序中，我有一个用于切换类的add按钮，该按钮位于一个card元素中，用于填充RESTAPI中的数据

当我点击按钮时，它会切换所有卡上按钮的类，而它只会切换我点击的卡上的类。我知道这一定与索引有关，但以下代码到目前为止不起作用：

component.js

import React, { Component } from 'react';
import './news.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
    superLargeDesktop: {
        breakpoint: { max: 4000, min: 3000 },
        items: 5,
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 3,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
    },
};

class News extends Component {

    state = {
        loading: false,
        data: [],
        headline: [],
        saved: [],
        condition: false
    }


    saved = data => {
        this.setState(
            (prevState) => ({ saved: [...prevState.saved, data], condition: !this.state.condition}),
            () => {
                console.log('Saved articles = ', this.state.saved);
                alert('Article saved');
                localStorage.setItem('saved', JSON.stringify(this.state.saved));
                localStorage.getItem('saved');
            });
    }

    onError() {
        this.setState({
            imageUrl: "../assets/img-error.jpg"
        })
    }

    constructor(props) {
        super(props)
        this.saved = this.saved.bind(this)
    }

    componentDidMount() {
        this.setState({ loading: true, saved: localStorage.getItem('saved') ? JSON.parse(localStorage.getItem('saved')) : [] })
        console.log('app mounted');
        fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=?')
            .then(data => data.json())
            .then(data => this.setState({ data: data.articles, loading: false }, () => console.log(data.articles)))
    }

    render() {
        return (
            <div className="news">
                {this.state.loading
                    ? "loading..."
                    : <div className="container">
                        <h3 className="text-left">Featured News</h3>
                        <Carousel
                            additionalTransfrom={0}
                            showDots={true}
                            arrows={false}
                            autoPlay={true}
                            autoPlaySpeed={3000}
                            centerMode={false}
                            className="carousel"
                            containerClass="container-with-dots"
                            dotListClass=""
                            draggable
                            focusOnSelect={false}
                            infinite
                            keyBoardControl
                            minimumTouchDrag={80}
                            renderButtonGroupOutside={true}
                            renderDotsOutside={true}
                            responsive={responsive}>
                            {this.state.data.map((post, indx) => {
                                return (
                                    <div className="card card-news text-left mt-3" key={indx}>
                                        <img className="media-img card-img-top card-img" src={post.urlToImage} alt="Alt text"></img>
                                        <div className="card-body">
                                            <h4 className="card-title block-with-text-2">{post.title}</h4>
                                            <button className={this.state.condition ? "btn-danger btn mt-2 mb-4" : "btn-primary btn mt-2 mb-4"}
                                                onClick={() => this.saved(post)}>{this.state.condition ? "Remove Article" : "Add Article"}</button>
                                            <p className="card-text block-with-text">{post.description}</p>
                                            <a className="button-bottom" href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                        </div>
                                    </div>
                                )
                            })}
                        </Carousel>
                    </div>
                }
            </div>
        )
    }
}
export default News;

import React，{Component}来自'React'；
导入“/news.css”；
从“react multi Carousel”导入转盘；
导入“react multi carousel/lib/styles.css”；
常数响应={
超大桌面：{
断点：{max:4000，min:3000}，
项目：5，
},
桌面：{
断点：{max:3000，min:1024}，
项目：3，
},
平板电脑：{
断点：{max:1024，min:464}，
项目：2，
},
流动电话：{
断点：{max:464，min:0}，
项目：1，
},
};
类新闻扩展组件{
状态={
加载：false，
数据：[]，
标题：[]，
已保存：[]，
条件：假
}
保存=数据=>{
这是我的国家(
（prevState）=>（{saved:[…prevState.saved，data]，条件：！this.state.condition}），
() => {
console.log（'Saved articles='，this.state.Saved）；
警报（“物品已保存”）；
localStorage.setItem（'saved'，JSON.stringify（this.state.saved））；
localStorage.getItem（'saved'）；
});
}
onError（）{
这是我的国家({
imageUrl:“../assets/img error.jpg”
})
}
建造师（道具）{
超级（道具）
this.saved=this.saved.bind（this）
}
componentDidMount（）{
this.setState（{加载：true，保存：localStorage.getItem（'saved'）？JSON.parse（localStorage.getItem（'saved'））：[]））
console.log（'app-mounted'）；
取（'https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=?')
.then（data=>data.json（））
.then（data=>this.setState（{data:data.articles，load:false}，（）=>console.log（data.articles）））
}
render（）{
返回(
{this.state.loading
“装载…”
: 
特色新闻
{this.state.data.map（（post，indx）=>{
返回(
{post.title}
this.saved（post）}>{this.state.condition？“删除文章”：“添加文章”}
{post.description}
)
})}
}
)
}
}
导出默认消息；

---

任何想法

我都会说，只需更新

数据

数组中的项目即可。e、 g如果单击了项目，我们希望添加

isSaved=true

键

类新闻扩展组件{
状态={
加载：false，
数据：[]，
标题：[]，
已保存：[]，
条件：假
}
已保存=端口=>{
const{data}=this.state；
const index=data.findIndex（obj=>obj.id==post.id）；
数据[索引].isSaved=！数据[索引].isSaved；
this.setState（{data:[…data]}）；
}
onError=（）=>{
这是我的国家({
imageUrl:“../assets/img error.jpg”
})
}
componentDidMount（）{
this.setState（{加载：true，保存：localStorage.getItem（'saved'）？JSON.parse（localStorage.getItem（'saved'））：[]））
console.log（'app-mounted'）；
取（'https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=?')
.then（data=>data.json（））
.then（data=>this.setState（{data:data.articles，load:false}，（）=>console.log（data.articles）））
}
render（）{
返回(
{this.state.loading
“装载…”
: 
特色新闻
{this.state.data.map（（post，indx）=>{
// ----------------------------------------------------
console.log（'Do something with post.isSaved value'）
// -----------------------------------------------------
返回(
{post.title}
this.saved（post）}>{this.state.condition？“删除文章”：“添加文章”}
{post.description}
)
})}
}
)
}
}
导出默认消息我会说，只需更新
数据
数组中的项即可。e、 g如果单击了项目，我们希望添加
isSaved=true
键


类新闻扩展组件{
状态={
加载：false，
数据：[]，
标题：[]，
已保存：[]，
条件：假
}
已保存=端口=>{