我可以在屏幕上看到表,并且从db.json导入的所有信息都已导入.当我打开控制台时,它向我显示了这些错误:文本 node 不能显示为<table>的子 node [ReactJS];警告:列表中的每个子 node 都应该有一个唯一的"key"props . 我try 将div更改为片段,但不起作用. 我怎么才能解决这个问题?
<table>
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元素的末尾有一个尾随的分号,它本身就在那里.把这个拿掉.
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 ,数组索引就可以作为后备.
id
示例:
<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.
Service Mesh实践指南 -〔周晶〕
推荐系统三十六式 -〔刑无刀〕
Java核心技术面试精讲 -〔杨晓峰〕
TensorFlow快速入门与实战 -〔彭靖田〕
NLP实战高手课 -〔王然〕
Service Mesh实战 -〔马若飞〕
小马哥讲Spring AOP编程思想 -〔小马哥〕
如何成为学习高手 -〔高冷冷〕
Redis源码剖析与实战 -〔蒋德钧〕
深入浅出分布式技术原理 -〔陈现麟〕
大厂设计进阶实战课 -〔小乔〕
零基础GPT应用入门课 -〔林健(键盘)〕
无涯教程 - Dart教程
无涯教程 - MySQL教程
无涯教程 - Java教程
无涯教程 - Redis教程
无涯教程 - HTML5教程
无涯教程 - Pandas教程
无涯教程 - Shell/Bash教程
无涯教程 - 剑指 Offer Java 题解教程