Javascript ReactJS，更改存储在状态数组中的img src

首先，我要做的是：我有几个div，其中包含一些文本和一个图像。div的所有数据都存储在状态数组中。您还可以添加div和删除所需的任何div。我现在想实现的是，当用户单击图像时更改图片。有一个预设的图像库，每当用户单击图像时，应显示下一个图像

以下是一些相关代码：

let clicks = 0;
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [
                createData( someimage, "Image 1"),
                createData( anotherimage, "Image 2"),
                createData( thirdimage, "Image 3"),
                createData( fourthimage, "Image 4"),
             ],
        imgs : [imgsrc1,imgsrc2, imgsrc3, imgsrc4],
        }
    }

newIcon (n) {
    let newStateArray = this.state.data.slice();
    let newSubStateArray = newStateArray[n].slice();

        if(clicks === 1) {

            newSubStateArray[0] = this.state.imgs[0];
            this.setState({imgsrc:newSubStateArray});
            clicks++;
        } else if (clicks === 2) {

            newSubStateArray[0] = this.state.imgs[1];
            this.setState({imgsrc:newSubStateArray});
            clicks++;
        } else if (clicks === 3) {

            newSubStateArray[0] = this.state.imgs[2];
            this.setState({imgsrc:newSubStateArray});
            clicks++;
        } else if (clicks === 4) {

            newSubStateArray[0] = this.state.imgs[4];
            this.setState({imgscr:newSubStateArray});
            clicks++;
        } 
    }           

render () {
    let { data }= this.state;
    return(
        <div>

            {data.map((n) => {
                return(
                <Child imgsrc={n.imgsrc} key={n} newIcon={this.newIcon.bind(this, n)} header={n.header} />
                );
            })}

        </div>
    );
}

let clicks=0；
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
createData（someimage，“图像1”），
createData（另一个图像，“图像2”），
createData（第三页，“图像3”），
createData（第四幅图像，“图像4”），
],
imgs:[imgsrc1、imgsrc2、imgsrc3、imgsrc4]，
}
}
新图标（n）{
让newStateArray=this.state.data.slice（）；
让newSubStateArray=newStateArray[n].slice（）；
如果（单击===1）{
newSubStateArray[0]=this.state.imgs[0]；
this.setState（{imgsrc:newSubStateArray}）；
点击++；
}否则如果（单击===2）{
newSubStateArray[0]=this.state.imgs[1]；
this.setState（{imgsrc:newSubStateArray}）；
点击++；
}否则如果（单击===3）{
newSubStateArray[0]=this.state.imgs[2]；
this.setState（{imgsrc:newSubStateArray}）；
点击++；
}否则如果（单击===4）{
newSubStateArray[0]=this.state.imgs[4]；
this.setState（{imgscr:newSubStateArray}）；
点击++；
} 
}           
渲染（）{
设{data}=this.state；
返回(
{data.map（（n）=>{
返回(
);
})}
);
}

一些旁注：createArray是一个创建子数组的函数，对于这个问题可能可以忽略。需要知道的是，第一个元素称为imgsrc，第二个元素称为imgsrc

因此，这里出现了一些问题，但我不确定它到底是什么。我的猜测是，我没有正确地访问数组中的值。上面，您可以看到我尝试对数组进行切片，然后分配新值。我遇到的另一个问题是，当我尝试从我的

newIcon（）调用n时，n显示为未定义

-功能。 我有点迷路了，因为我是一个新手，所以欢迎任何类型的提示和建议。

尝试在构造函数中绑定newIcon（）方法，如下所示：

this.newIcon = this.newIcon.bind(this);

在render方法中，无需任何绑定即可正常调用：

this.newIcon(n)

---

我会删除

newIcon

中的所有代码，并将

单击

作为状态的一部分。如果您有一个图像数组，则可以使用

单击

作为指向下一个应显示图像的指针

在本例中，我随意添加了虚拟图像来帮助解释，并将

单击

更改为

指针

，因为这更有意义

class Parent extends React.Component {

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

      // clicks is called `pointer` here and initially
      // is set to the first index of the imgs array
      pointer: 0,
      imgs: [
        'https://dummyimage.com/100x100/000000/fff.png',
        'https://dummyimage.com/100x100/41578a/fff.png',
        'https://dummyimage.com/100x100/8a4242/fff.png',
        'https://dummyimage.com/100x100/428a49/fff.png'
      ]
    };

    // Bind your class method in the constructor
    this.handleClick = this.handleClick.bind(this);
  }

  // Here we get the length of the imgs array, and the current
  // pointer position. If the pointer is at the end of the array
  // set it back to zero, otherwise increase it by one.
  handleClick() {
    const { length } = this.state.imgs;
    const { pointer } = this.state;
    const newPointer =  pointer === length - 1 ? 0 : pointer + 1;
    this.setState({ pointer: newPointer });
  }

  render() {

    const { pointer, imgs } = this.state;

    // Have one image element to render. Every time the state is
    // changed the src of the image will change too.
    return (
      <div>
          <img src={imgs[pointer]} onClick={this.handleClick} />
      </div>
    );
  }

}

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
//单击在此处和最初称为“指针”
//设置为imgs数组的第一个索引
指针：0，
imgs：[
'https://dummyimage.com/100x100/000000/fff.png',
'https://dummyimage.com/100x100/41578a/fff.png',
'https://dummyimage.com/100x100/8a4242/fff.png',
'https://dummyimage.com/100x100/428a49/fff.png'
]
};
//在构造函数中绑定类方法
this.handleClick=this.handleClick.bind（this）；
}
//这里我们得到了imgs数组的长度和当前
//指针位置。如果指针位于数组的末尾
//将其设置回零，否则将其增加1。
handleClick（）{
const{length}=this.state.imgs；
const{pointer}=this.state；
const newPointer=指针===长度-1？0:指针+1；
this.setState（{pointer:newPointer}）；
}
render（）{
const{pointer，imgs}=this.state；
//具有一个要渲染的图像元素。每次状态为
//更改图像的src也将更改。
返回(
);
}
}

编辑：因为您有多个div，其中的图像源需要更改，所以可能需要在父组件中保留一个图像数组，并将这些图像的子集作为道具传递给每个图像组件，然后存储在每个组件的状态中。这样，您就不需要对图像组件进行太多更改

class Image extends React.Component {

  constructor(props) {
    super(props);
    this.state = { pointer: 0, imgs: props.imgs };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { length } = this.state.imgs;
    const { pointer } = this.state;
    const newPointer =  pointer === length - 1 ? 0 : pointer + 1;
    this.setState({ pointer: newPointer });
  }

  render() {

    const { pointer, imgs } = this.state;

    return (
      <div>
          <img src={imgs[pointer]} onClick={this.handleClick} />
      </div>
    );
  }

}

class ImageSet extends React.Component {

   constructor() {
     super();
     this.state = {
       imgs: [
        'https://dummyimage.com/100x100/000000/fff.png',
        'https://dummyimage.com/100x100/41578a/fff.png',
        'https://dummyimage.com/100x100/8a4242/fff.png',
        'https://dummyimage.com/100x100/428a49/fff.png',
        'https://dummyimage.com/100x100/bd86bd/fff.png',
        'https://dummyimage.com/100x100/68b37c/fff.png',
        'https://dummyimage.com/100x100/c9a7c8/000000.png',
        'https://dummyimage.com/100x100/c7bfa7/000000.png'
      ]
     }
   }

   render() {

     const { imgs } = this.state;

     return (
       <div>
         <Image imgs={imgs.slice(0, 4)} />
         <Image imgs={imgs.slice(4, 8)} />
       </div>
     )
   }

}

类映像扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={指针：0，imgs:props.imgs}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
const{length}=this.state.imgs；
const{pointer}=this.state；
const newPointer=指针===长度-1？0:指针+1；
this.setState（{pointer:newPointer}）；
}
render（）{
const{pointer，imgs}=this.state；
返回(
);
}
}
类ImageSet扩展了React.Component{
构造函数（）{
超级（）；
此.state={
imgs：[
'https://dummyimage.com/100x100/000000/fff.png',
'https://dummyimage.com/100x100/41578a/fff.png',
'https://dummyimage.com/100x100/8a4242/fff.png',
'https://dummyimage.com/100x100/428a49/fff.png',
'https://dummyimage.com/100x100/bd86bd/fff.png',
'https://dummyimage.com/100x100/68b37c/fff.png',
'https://dummyimage.com/100x100/c9a7c8/000000.png',
'https://dummyimage.com/100x100/c7bfa7/000000.png'
]
}
}
render（）{
const{imgs}=this.state；
返回(
)
}