react.js는 간단한 링크 목록을 반환합니다

Question

저는 초보자 인 js입니다. 배열을 매핑 한 후 반응 라우터를 사용하여 간단한 링크 목록을 표시하고 싶습니다. 브라우저의 오류 :

경고 : 배열 또는 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다.

App의 렌더링 방법을 확인하십시오. 앱에서 : (59 App.js에서) BrowserRouter에서

import React, { Component } from 'react'; 
 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
 
import Photolist from './photolist'; 
 
// import logo from './logo.svg'; 
 
import './App.css'; 
 

 
class App extends Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = { 
 

 
     } 
 
    } 
 
    render() { 
 

 
    const tab_albums = [ 
 
     { 
 
     "albumId": 1, 
 
     "id": 1, 
 
     "title": "accusamus beatae ad facilis cum similique qui sunt", 
 
     "url": "http://placehold.it/600/92c952", 
 
     "thumbnailUrl": "http://placehold.it/150/92c952" 
 
     }, 
 
     { 
 
     "albumId": 1, 
 
     "id": 2, 
 
     "title": "reprehenderit est deserunt velit ipsam", 
 
     "url": "http://placehold.it/600/771796", 
 
     "thumbnailUrl": "http://placehold.it/150/771796" 
 
     }, 
 
     { 
 
     "albumId": 2, 
 
     "id": 66, 
 
     "title": "provident rerum voluptatem illo asperiores qui maiores", 
 
     "url": "http://placehold.it/600/ee0a7e", 
 
     "thumbnailUrl": "http://placehold.it/150/ee0a7e" 
 
     }, 
 
     { 
 
     "albumId": 2, 
 
     "id": 67, 
 
     "title": "veritatis labore ipsum unde aut quam dolores", 
 
     "url": "http://placehold.it/600/1279e9", 
 
     "thumbnailUrl": "http://placehold.it/150/1279e9" 
 
     } 
 
    ]; 
 
    const albumsIds = []; 
 
    
 
    tab_albums.map((album_model) => { 
 
     return (
 
      albumsIds.indexOf(album_model.albumId) === -1 ? albumsIds.push(album_model.albumId) : null 
 
     ) 
 
    }); 
 
    
 
    var album_style = {"background": "#cccccc", "marginBottom": "10px", "borderLeft": "5px solid red"}; 
 
    var style_div = {"width": "50%", "float": "left"}; 
 

 
    const liste_album = albumsIds.map((alb_id) => { 
 
      return (
 
      <Router> 
 
       <li key={alb_id} style={album_style}><Link to={"/album"+alb_id}>Album : { alb_id }</Link></li> 
 
       {/* <Route path="/photolist" component={Photolist}/> */} 
 
      </Router> 
 
     ) 
 
    }); 
 

 
    return (
 
    <div className="App"> 
 
     <div style={style_div}> 
 
     <ul>{liste_album}</ul> 
 
     </div> 
 
     <div style={style_div}> 
 
     <button>wishlist</button> 
 
     <Photolist /> 
 
     </div> 
 
    </div> 
 
     
 
    ); 
 
    } 
 
} 
 

 
export default App;

감사 : (하는 index.js에서는 : 7)

이 내 모든 app.js입니다 당신을 돕기 위해 ...

Answer 1

<Router/> 요소에 key 속성을 넣어야합니다. key에 대한 자세한 내용은 Check the React documentation.

const liste_album = albumsIds.map((alb_id) => { 
     return (
     <Router key={alb_id}> 
      <li style={album_style}><Link to={"/album"+alb_id}>Album : { alb_id }</Link></li> 
      {/* <Route path="/photolist" component={Photolist}/> */} 
     </Router> 
    ) 
});