重复组件的key值不要用index实例

原创于 2021-05-21 11:52:37 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

前端专栏收录该内容

30 篇文章

订阅专栏

本文探讨了在React组件中如何正确设置key属性，以保证列表项的唯一性，避免不必要的重渲染，并提供了使用动态key的示例和优化建议，如使用`key-${item.id}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { useState } from 'react'
import { Button } from 'antd'

function CompanyInfo() {
  const [arr, setArr] = useState(['a','b','c'])
  const change = () => {
    let a = [ 'd', ...arr ]
    setArr(a)
    console.log(arr)
  }
  return (
    <div>
      <ul>
        {
          arr.map((v,index) =>{ return <li key={index}>{v} <input type="text" /></li> })
        }
      </ul>
      <Button onClick={change}>增加</Button>
    </div>
  )
}
export default CompanyInfo