如何修复警告：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将 a 呈现<div>为最外层节点。检查它的实施。

你<tbody>通过线条隐式渲染它

<tbody>
    {usersList}
</tbody>

whereusersList默认为<Spinner />没有用户时或loadingis true。这就是为什么会出现错误。

解决方法是将 包装Spinner成td跨越整行的 ：

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