javascript - 使用 uniqid 生成两次唯一 ID

Question

我有以下内容，但收到错误消息，指出键应该是唯一的，并且它指的是跨度。 uniqid

  ...

  const displayResults = (list: any) => {
    const slicedList = list.slice(0, 3)

    const html =
      slicedList.map((p: string | Address) => {
        if (typeof p === 'object') {
          return <span key={`id-${uniqid()}`}>{addressToString(p)}</span>
        }
        return <span key={`id-${uniqid()}`}>{p}</span>
      })

    if (list.length > 3) {
      html.push(elipsis)
    }

    return html
  }

uniqid 不应该生成一个 unqiue 值吗？

Answer 1

无需使用 uniqid。使用p 作为组件的key。阅读 React 文档中的列表和键。

https://reactjs.org/docs/lists-and-keys.html

const displayResults = (list: any) => {
  const slicedList = list.slice(0, 3)    
  const html = slicedList.map((p: string | Address, index) => {
     if (typeof p === 'object') {
        return <span key={`id-${addressToString(p)}`}>{addressToString(p)}</span>
     }
     return <span key={`id-${p}`}>{p}</span>
  })
    
  if (list.length > 3) {
     html.push(elipsis)
  }
    
  return html
}