Javascript 动态呈现页面上多次使用的react组件上的唯一按钮

我是个新手，必须用它为我的训练营做一个项目，我很难让我渲染的每个电影组件都有一个单独的按钮。每次我单击一个按钮时，页面上的其余按钮就好像它们也被单击一样。这是我正在调用的电影组件。 这是我的第一行组件，按钮是左下角的绿色按钮

importReact，{Component}来自“react”；
从“./utils/API”导入
ClassMovieExtendComponent{
构造函数（）{
超级（）；
这个州={
颜色：'绿色'，
图标：“添加”，
结果：[]
};
}
componentDidMount（）{
这是topMovies（）；
}
热门电影=（）=>{
API.topMovies（）
.then（res=>this.setState（{result:res.data.results}））
.catch（err=>console.log（err））；
}
handleClick=事件=>{
if（this.state.color=='green'）{
this.setState（{color:'red'}）；
}否则{
this.setState（{color:'green'}）；
}
if（this.state.icon==='add'）{
this.setState（{icon:'remove'}）；
}否则{
this.setState（{icon:'add'}）；
}
}
render（）{
“mgURL=”https://image.tmdb.org/t/p/w300/"
返回(
{
this.state.result.map（（movieList）=>(
{this.state.icon}
标题：{movieList.Title}

流派：{movieList.Genre_id}

评级：{movieList.vote_average}

))
}
)
}
}
中国电影；

您需要在构造函数中绑定

handleClick

函数（实际上是所有函数）：

constructor(){
    super();
    this.state={

        color:'green',
        icon:'add',
        result:[]
    };
    this.handleClick = this.handleClick.bind(this);
}

---

您需要在构造函数中绑定

handleClick

函数（实际上是所有函数）：

constructor(){
    super();
    this.state={

        color:'green',
        icon:'add',
        result:[]
    };
    this.handleClick = this.handleClick.bind(this);
}

onClick={（）=>this.handleClick（）}也可以工作。

onClick={（）=>this.handleClick（）}也可以工作。

.map（）为数组中的每个元素调用提供的回调。这意味着您正在创建几个按钮，这些按钮将在每个元素上执行相同的事件。我建议创建一个处理onclick事件的行组件，然后可以向该组件传递一个id或使用一个内嵌箭头函数（）=>this.handleClick（）。（这会在每次单击时创建一个匿名函数，可能会对大型应用程序的性能造成不利影响，但如果您不想创建行组件，则可以在您的情况下使用）

您还应该了解为什么使用具有唯一ID的密钥很重要。

希望有帮助。

.map（）为数组中的每个元素调用提供的回调。这意味着您正在创建几个按钮，这些按钮将在每个元素上执行相同的事件。我建议创建一个处理onclick事件的行组件，然后可以向该组件传递一个id或使用一个内嵌箭头函数（）=>this.handleClick（）。（这会在每次单击时创建一个匿名函数，可能会对大型应用程序的性能造成不利影响，但如果您不想创建行组件，则可以在您的情况下使用）

您还应该了解为什么使用具有唯一ID的密钥很重要。

---

希望有帮助。

屏幕截图链接不可见屏幕截图链接不可见