react.js 返回简单的链接列表

Question

我是 react js 的初学者，我想在映射数组后使用 react-router 显示一个简单的链接列表。 这是浏览器中的错误：

警告：数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。

检查App的渲染方法。 在 BrowserRouter (在 App.js:59) 在应用程序中（在 index.js:7）

这是我所有的 app.js：

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;

感谢您的帮助...

Answer 1

您应该将key 属性放在<Router/> 元素上。 Check the React documentation 了解更多关于 key 的信息。

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> 
      )
});