React组件触发列表子元素key属性警告，求问题原因

警告产生的核心原因 #

React要求列表中的每个子元素必须有唯一的key prop，用来在列表更新时高效识别元素的变化、添加或删除。你的代码里有两处违反这个规则的地方：

1. App组件中渲染MovieItem时未添加key #

在App的movies.map循环里，返回的<MovieItem>没有设置key。React遍历movies数组生成组件时，无法区分每个MovieItem，这是触发警告的主要原因。

2. MovieItem组件内部的逻辑错误 #

• 你用Object.entries(movieData)遍历props的键值对，这会把每个电影的id、title、description、year都拆成单独的键值对数组（比如["id", "a4e4a6c7-..."]），然后给每个<li>设置key={values.id}——但values是数组，根本没有id属性，等于key是undefined，完全无效。
• 更关键的是，这个逻辑本身错误：每个MovieItem对应一部电影，应该渲染一个列表项，而不是把电影的每个属性都做成独立的li。

修复代码 #

修复后的App组件 #

function App() {
  const [movies, setMovies] = useState([
    {
      "id": "a4e4a6c7-36d3-4a3a-b2e9-3c5e6b368730",
      "title": "Inception",
      "description": "A thief who enters the dreams of others to steal their deepest secrets.",
      "year": 2010
    },
    {
      "id": "95ccff67-9097-4a9e-9e79-0253b4f59ddc",
      "title": "The Shawshank Redemption",
      "description": "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
      "year": 1994
    },
    {
      "id": "f21a43a7-64a1-40f7-a4ed-c04b28a9bf4b",
      "title": "The Godfather",
      "description": "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
      "year": 1972
    },
    {
      "id": "4b9467a0-2244-4ae1-9d44-5201b4e8e56a",
      "title": "Goodfellas",
      "description": "The story of Henry Hill and his life in the mob, covering his relationship with his wife Karen Hill and his mob partners Jimmy Conway and Tommy DeVito.",
      "year": 1990
    }
  ])
    
  return(
    <div>
      <ol>
        {movies.map((movie) =>{
          // 给MovieItem添加唯一key，用电影的id
          return <MovieItem 
            key={movie.id}
            id={movie.id} 
            title={movie.title} 
            description={movie.description} 
            year={movie.year} 
          />
        })}
      </ol>
    </div>
  )
}

export default App

修复后的MovieItem组件 #

// 解构props，直接获取需要的属性
const MovieItem = ({ title, description, year }) => {
  // 每个MovieItem对应一个li，渲染电影的完整信息
  return(
    <li>
      <h3>{title}</h3>
      <p>{description}</p>
      <span>上映年份：{year}</span>
    </li> 
  )
}

export default MovieItem

额外说明 #

• key必须是列表内唯一的值，优先用数据本身的唯一标识（比如这里的电影id），不要用数组索引，因为索引会在列表元素顺序变化时失效。
• 如果你原本想在MovieItem里渲染电影的多个属性，应该把它们放在同一个<li>里，而不是循环生成多个li——因为外层已经是<ol>，每个MovieItem就是一个列表项。

内容的提问来源于stack exchange，提问作者Joaquín Ruiz