Как я могу добавить ключ к моему тегу div в Реагировать с Обещаниями

Question

Я новичок в React js и создаю небольшой проект для него, и я хочу добавить ключ к моему div. Как я могу добавить ключ для каждого изображения?

  class Image extends Component {

      constructor() {
        super();
        this.state = { images: [] };
      }


      componentDidMount() {

        let promise = apiGateway.getImages();
        if (promise != null) {
          promise.then((value) => {
            Promise.all(value).then((images) => {
              this.setState({ images: images});
            });
          });
        }
      }

    renderimage(value){
      return(
        <div key={}>
        <img className='image' src={value.data} width='100' height='100' alt='nature'/>
        </div>
        );
    }


      render() {

        return(  
                     <div>
                          <div>{
                            this.state.images.map((image)=>{
                              return this.renderimage(image);
                            })
                          }
                          </div>
                    </div>
        );
      }

    }

    export default Image;

Answer 1

class Image extends Component {

    constructor() {
        super();
        if undefined == window.last_image_key {
            window.last_image_key = 1;
        } else {
            window.last_image_key = window.last_image_key + 1;
        }
        this.state = { images: [], image_key: window.last_image_key };
    }

    imageKey() {
        return this.state.image_key
    }

    renderimage(value){
      return(
        <div key={imageKey()}>
        <img className='image' src={value.data} width='100' height='100' alt='nature'/>
        </div>
        );
    }

    ...
}

Answer 2

Просто добавьте индекс получения от map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 class Image extends Component {
   constructor () {
     super()
     this.state = { images: [] }
   }

   componentDidMount () {
     let promise = apiGateway.getImages()
     if (promise != null) {
       promise.then((value) => {
         Promise.all(value).then((images) => {
           this.setState({ images: images})
         })
       })
     }
   }

   renderimage (value, key) {
     return (
       <div key={key}>
         <img className='image' src={value.data} width='100' height='100' alt='nature' />
       </div>
     )
   }

   render () {
     return (
       <div>
         <div>{this.state.images.map((image, key) => {
           return this.renderimage(image, key)
         })}
         </div>
       </div>
     )
   }
    }

 export default Image