Javascript 文本 node 不能作为 [ReactJS] 的子 node 出现;警告:列表中的每个子元素都应该有一个独特的关键props

我可以在屏幕上看到表,并且从db.json导入的所有信息都已导入.当我打开控制台时,它向我显示了这些错误:文本 node 不能显示为<table>的子 node [ReactJS];警告:列表中的每个子 node 都应该有一个唯一的"key"props . 我try 将div更改为片段,但不起作用. 我怎么才能解决这个问题?

return (
  <div className='container'>
    <table className="table">
      <thead>
        <tr className='bg-dark text-white'>
          <th scope="col">#</th>
          <th scope="col">Product Name</th>
          <th scope="col">Product Number</th>
          <th scope="col">Color</th>
          <th scope="col">List Price</th>
          <th scope="col">Modified Date</th>
          <th scope="col">Action</th>  
        </tr>
      </thead>
      <tbody>
        {products.map((product, index) => (
          <tr>
            <th scope='row'> {index + 1}</th>
            <td>{product.name}</td>   
            <td>{product.number}</td> 
            <td>{product.color}</td> 
            <td>{product.price}</td> 
            <td>{product.date}</td> 
            <td>
              <Link className='btn btn-primary m-2'><i className="fa fa-eye" aria-hidden="true"></i></Link>
              <Link className='btn btn-otline-primary m-2'>Edit</Link>
              <Link className='btn btn-danger m-2'>Delete</Link>
            </td> 
          </tr>
        ))};
      </tbody>
    </table>
    <Link className='btn btn-outline-dark w-25' to='/product/add'>
      Add Product
    </Link>
  </div>
);
}

推荐答案

文本 node 不能显示为<table>的子 node

tbody元素的末尾有一个尾随的分号,它本身就在那里.把这个拿掉.

<table className="table">
  <thead>
    <tr className='bg-dark text-white'>
      <th scope="col">#</th>
      <th scope="col">Product Name</th>
      <th scope="col">Product Number</th>
      <th scope="col">Color</th>
      <th scope="col">List Price</th>
      <th scope="col">Modified Date</th>
      <th scope="col">Action</th>  
    </tr>
  </thead>
  <tbody>
    {products.map((product, index) => (
      <tr>
        <th scope='row'> {index + 1}</th>
        <td>{product.name}</td>   
        <td>{product.number}</td> 
        <td>{product.color}</td> 
        <td>{product.price}</td> 
        <td>{product.date}</td> 
        <td>
          <Link className='btn btn-primary m-2'><i className="fa fa-eye" aria-hidden="true"></i></Link>
          <Link className='btn btn-otline-primary m-2'>Edit</Link>
          <Link className='btn btn-danger m-2'>Delete</Link>
        </td> 
      </tr>
    ))}; // <-- remove trailing text node
  </tbody>
</table>

警告:列表中的每个子元素都应该有一个唯一的"关键"props .

在将数组映射到JSX时,最外层的映射元素需要一个Reaction键.Reaction键在同级项中应该是唯一的.id和其他GUID属性可以作为很好的react 键,但只要数组没有发生Mutations ,数组索引就可以作为后备.

示例:

<tbody>
  {products.map((product, index) => (
    <tr key={product.id}> // <-- React key on outer element
      <th scope='row'>{index + 1}</th>
      <td>{product.name}</td>   
      <td>{product.number}</td> 
      <td>{product.color}</td> 
      <td>{product.price}</td> 
      <td>{product.date}</td> 
      <td>
        <Link className='btn btn-primary m-2'>
          <i className="fa fa-eye" aria-hidden="true" />
        </Link>
        <Link className='btn btn-otline-primary m-2'>Edit</Link>
        <Link className='btn btn-danger m-2'>Delete</Link>
      </td> 
    </tr>
  ))}
</tbody>

有关react 键用法的更多详细信息,请参见Lists and Keys.

Javascript相关问答推荐

如何从调整大小/zoom 的SVG路径定义新的d属性?""

你怎么看啦啦队的回应?

如何从隐藏/显示中删除其中一个点击?

虚拟滚动实现使向下滚动可滚动到末尾

JS:XML insertBefore插入元素

搜索功能不是在分页的每一页上进行搜索

是否可以在Photoshop CC中zoom 路径项?

Reaction-SWR-无更新组件

按什么顺序接收`storage`事件?

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

在单击按钮时生成多个表单时的处理状态

使用Java脚本在div中创建新的span标记

REACT-本机错误:错误类型错误:无法读取未定义的容器的属性

我想为我的Reaction项目在画布上加载图像/视频,图像正在工作,但视频没有

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

如果未定义,如何添加全局变量

我在JS代码中收到超过最大调用堆栈大小的错误,但我找不到原因.有谁能帮我搬一下吗?

将数组解析为js中的无序列表

try 使用Reaction路由V5渲染多个布局

我的NPM Vue库没有生成/导出TS类型