javascript - 定义多个数组时，数组或迭代器中的每个子元素都应具有唯一的 "key"属性

Question

我定义了 2 个不同的值，但不断收到错误“数组或迭代器中的每个子项都应该有一个唯一的“key”属性。”当我将索引更改为另一个字符时，问题仍然存在。关于如何解决这个问题的任何想法/

const navLinks = [
      {route: '/about', text: 'Works'},
      {route: '/products', text: 'Profile'},
      {route: '/contact', text: 'Contact'},
      {route: '/how', text: 'How'}
    ];

    const Links = navLinks.map((b, i) =>
      <Link key={i} to={b.route} activeStyle={{color: 'red'}} className="link is-info navbar-item is-hidden-tablet">{b.text}</Link>
    );

    const Links1 = navLinks.slice(0, 2).map((b, i) =>
      <p className="level-item has-text-centered is-hidden-touch">
        <Link to={b.route} activeStyle={{color: 'red'}} className="link is-info">{b.text}</Link>
      </p>
    );

Answer 1

该问题似乎缺少 key Links1 中段落元素的 prop 。尝试添加key={ i }至<p/>像这样:

const Links1 = navLinks.slice(0, 2).map((b, i) =>
      <p key={ i } className="level-item has-text-centered is-hidden-touch">
        <Link to={b.route} activeStyle={{color: 'red'}} className="link is-info">
        {b.text}
        </Link>
      </p>
    );