Как исправить Предупреждение: validateDOMNesting (...): <div>не может отображаться как дочерний элемент <tbody>

Question

я передаю список пользователей в качестве реквизита для компонента UserItem, чтобы выполнить итерацию в списке пользователей и отобразить их в таблице. список отображается правильно, и у меня нет никаких div в моем рендере, но я все еще получаю ошибку: index.js: 1446 Предупреждение: validateDOMNesting (...): не может быть дочерним по отношению к.

перепробовал много решений, найденных в сети, но ни одно из них не сработало

Код управления пользователями:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from './common/Spinner';
import { getUsers } from '../actions/userActions';
import UserItem from './UserItem';

class UsersManagement extends Component {
  componentDidMount() {
    if (!this.props.auth.isAuthenticated) {
      this.props.history.push('/login');
    }
    this.props.getUsers();
  }

  render() {
    const { users, loading } = this.props.user;
    let usersList;
    if (users === null || loading) {
      usersList = <Spinner />
    } else {
      if (users.length > 0) {
        usersList = users.map(user => (
          <UserItem key={user._id} user={user} />
        ))
      } else {
        usersList = <h2>No users</h2>
      }
    }

    return (
      <div className="row">
        <div className="col-12">
          <h1 className="text-center mb-2">Users Management</h1>
          <button type="button" className="btn btn-success mb-4">New User</button>
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Options</th>
                <th scope="col">Username</th>
                <th scope="col">Email</th>
                <th scope="col">Phone Number</th>
              </tr>
            </thead>
            <tbody>
              {usersList}
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

UsersManagement.propTypes = {
  getUsers: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  auth: state.auth,
  user: state.user
})

export default connect(mapStateToProps, {
  getUsers
})(UsersManagement);

Код пользователя:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class UserItem extends Component {
  render() {
    const { user } = this.props;
    console.log(user);
    return (
      <tr>
        <th scope="row">
          <button type="button" className="btn btn-primary fa-xs mr-1"><i className="fas fa-pencil-alt"></i></button>
          <button type="button" className="btn btn-danger fa-xs"><i className="far fa-trash-alt"></i></button>
        </th>
        <td>{user.username}</td>
        <td>{user.email}</td>
        <td>{user.phone}</td>
      </tr>
    )
  }
}

UserItem.propTypes = {
  user: PropTypes.object.isRequired
}

export default UserItem;

Я ожидаю, чтобы исправить предупреждение

Answer 1

Скорее всего, компонент Spinner отображает <div> как самый внешний узел. Проверьте реализацию этого.

Вы неявно отображаете его внутри <tbody> через строки

<tbody>
    {usersList}
</tbody>

где usersList по умолчанию <Spinner />, когда нет пользователей или loading равно true. Вот почему получите ошибку.

Исправление будет заключаться в том, чтобы обернуть Spinner в td, который охватывает весь ряд:

if (users === null || loading) {
    usersList = <tr><td colSpan="4"><Spinner /></td></tr>;
} else {
    // ...
}