[英]Text nodes cannot appear as a child of <table> [ReactJS]
為什么我會收到此警告？
Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <table> 。
在某些情況下，我看到它是關於一些空白的，但我不明白這在這里是如何應用的。
我的代碼：
return (
<div className="container">
<div>
<h2 style={{color: 'red'}}>Lista de Clientes</h2>
</div>
<br/>
<table className="table table-bordered">
<thead className="thead-dark">
<tr>
<th>#</th>
<th>Nome</th>
<th>Telefone</th>
<th>E-mail</th>
<th>Detalhar</th>
<th>Excluir</th>
</tr>
</thead>
{ inserirClientes }
</table>
</div>
);
在這里創建inserirClientes的循環
let inserirClientes = this.state.mensagem
if (this.state.retorno) {
inserirClientes = (
Object.keys(this.state.clientes)
.map((key, i) =>
<tbody key={key + i} >
<Clientes
remover={this.removerClienteHandler}
clienteInfo={this.state.clientes[key]}
clickRemove={() => this.fetchHandler()}
indice={i}
/>
</tbody>
)
)
}
編輯：
我開始在循環中生成<tr>而不是<tbody>並且錯誤仍然存在，但現在我得到了這個：
Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>
let inserirClientes = this.state.mensagem
if (this.state.retorno) {
inserirClientes = (
Object.keys(this.state.clientes)
.map((key, i) => (
<tr key={`${key}${i}`} >
<Clientes
remover={this.removerClienteHandler}
clienteInfo={this.state.clientes[key]}
clickRemove={() => this.fetchHandler()}
indice={i}
/>
</tr>
))
)
console.log(inserirClientes)
}
return (
<div className="container">
<div>
<h2 style={{color: 'red'}}>Lista de Clientes</h2>
<h4 style={{color: 'red'}}>OBS.: Verificar se é a melhor maneira de se criar tal tabela. Talvez seja possível criar um componente para isso</h4>
</div>
<br/>
<table className="table table-bordered">
<thead className="thead-dark">
<tr>
<th>#</th>
<th>Nome</th>
<th>Telefone</th>
<th>E-mail</th>
<th>Detalhar</th>
<th>Excluir</th>
</tr>
</thead>
<tbody>{inserirClientes}</tbody>
</table>
</div>
);
知道如何解決這個問題嗎？
inserirClientes的初始值。 Since you've initialized inserirClientes to be equal to this.state.mensagem , this component's first render will use that as the initial value, because Object.keys(this.state.clientes).map() has not yet had a chance to跑。
我猜這些是您最初的 state 值？
state = {
mensagem: 'initial message',
retorno: false,
// other values...
}
如果是這樣， inserirClientes在第一次渲染時具有'initial message'的值，並且您正在有效地執行此操作：
<tbody>{'initial message'}</tbody>
由於您可能希望在數據加載之前顯示初始消息，我們可以簡單地在初始消息周圍提供必要的標記，使其在<table>中有效。
// since this will be a child of <tbody>, start with valid <tr> markup
let inserirClientes = <tr><td>{this.state.mensagem}</td></tr>
// if data has returned, replace initial message with array of <tr>s
if (this.state.retorno) {
inserirClientes =
Object.keys(this.state.clientes).map((key, i) => (
<tr key={`${key}${i}`} >
<Clientes
remover={this.removerClienteHandler}
clienteInfo={this.state.clientes[key]}
clickRemove={() => this.fetchHandler()}
indice={i}
/>
</tr>
))
}
console.log(inserirClientes)
return (
<div className="container">
<div>
<h2 style={{color: 'red'}}>Lista de Clientes</h2>
<h4 style={{color: 'red'}}>OBS.: Verificar se é a melhor maneira de se criar tal tabela. Talvez seja possível criar um componente para isso</h4>
</div>
<br/>
<table className="table table-bordered">
<thead className="thead-dark">
<tr>
<th>#</th>
<th>Nome</th>
<th>Telefone</th>
<th>E-mail</th>
<th>Detalhar</th>
<th>Excluir</th>
</tr>
</thead>
<tbody>{inserirClientes}</tbody>
</table>
</div>
)
HTML 中表的正確結構是
<table>
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</tbody>
</table>
因此，您需要在<tr>中添加一個<td>以使其成為有效的 DOM 結構
inserirClientes =
<tr>
{Object.keys(this.state.clientes).map((key, i) => (
<td key={`${key}${i}`}>
<Clientes
remover={this.removerClienteHandler}
clienteInfo={this.state.clientes[key]}
clickRemove={() => this.fetchHandler()}
indice={i}
/>
</td>
))}
</tr>
validateDOMNesting(...)：文本節點不能作為子節點出現
[英]validateDOMNesting(…): Text nodes cannot appear as a child of <tbody>
反應：警告：validateDOMNesting（...）：空白文本節點不能作為子節點出現
[英]React: Warning: validateDOMNesting(…): Whitespace text nodes cannot appear as a child of <tr>
反應：警告：validateDOMNesting（…）：文本節點不能顯示為以下子項<tbody>
[英]React: Warning: validateDOMNesting(…): Text nodes cannot appear as a child of <tbody>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.