react map遍历数组，展示在页面上，如何通过变量去修改其中一个的图片。

Question

问题描述

我有一个数组，通过map遍历在页面展示，我点击其中一张图片的时候，对应的灰色图片变为蓝色图片

问题出现的环境背景及自己尝试过哪些方法

代码：

效果图：

点击效果图的红色区域，对应的图片有灰色图片变为蓝色图片

Answer 1

const advList = this.state.advList.map((item,key)=> {
    if (key === index) {
        return Object.assign({}, item, {visibelChange: true})
    }
    return item
})
this.setState({advList})

Answer 2

图片属于静态资源，不能直接替换地址，需要提前require引入

Answer 3

看下你画红框的<Img />代码那一行，你监听的是item.visibleColor来变化Img的url，等同于你监听的是this.state.advList这个数组的每一项，但是你的changeColor方法却改变的是this.state.visibleChange。监听的数据与改变的数据不是同一个,所以你点击了也没有任何效果。 将changeColor方法修改一下

changeColor =() => {
     const _newList = this.state.advList.map((item,key) => {
        let visibleColor= true;
        
        if (key !== index) { // 把非点击图片颜色变为灰色（排他思想）
             visibleColor= false
        }
        return Object.assign({}, item, {visibleColor: visibleColor})
     });
     this.setState({
         advList: _newList
     });
}