javascript - 文本节点不能显示为<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的初始值。

由于已将inserirClientes初始化为等于this.state.mensagem，因此该组件的第一个渲染将使用该值作为初始值，因为Object.keys(this.state.clientes).map()尚未运行。

我猜这些是您的初始状态值？

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>
)

关于javascript - 文本节点不能显示为<table>的子级[ReactJS]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62351402/