“列表中的每个孩子都应该有一个独特的“关键”道具”警告不会消失

问题描述

据我所知，我正在传递一个唯一密钥：//我似乎仍然无法摆脱警告我添加一个唯一密钥的警告。我已经尝试过通过索引和project.name进行尝试，但是没有运气！

const Portfolio = () => {
  const [projects,setProjects] = useState([
    {
      id: 1,name: 'Portfolio',description:
        "The site you're on right Now!  You can view the source code on github.",tech: ['React','HTML','CSS','Netlify'],live: 'https://arrantate.netlify.com/',code: 'https://github.com/arrantate/portfolio',img: portfolioIMG,},{
      id: 2,name: 'Weather App',description:
        'Gives you the current weather and some brief @R_420_4045@ion about a city of your choice',tech: ['Python','Flask','API calls','Bootstrap','HTML'],live: null,code: 'https://github.com/arrantate/weather-app',img: weatherAppIMG,]);

  return (
    <div className='container'>
      <h1>Portfolio</h1>
      {projects.map((project) => {
        return <Project key={project.id} project={project} />;
      })}
    </div>
  );
};

解决方法

<div className='container'>
  <h1>Portfolio</h1>
  {
    projects.map((project,index) => {
      return (
        <div key={"_key"+index}>
          <Project project={project} />;
        </div>
      );
    })
  }
</div>