Question

im将传递用户列表作为对UserItem组件的支持，使其在用户列表上进行迭代并在表上显示它们。该列表显示正确，并且我的渲染返回中没有任何div，但我仍然收到错误： index.js：1446警告：validateDOMNesting（...）：不能作为的子代出现。

尝试了许多在线找到的解决方案，但没有一个起作用

UsersManagement代码：

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

UserItem代码：

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

我有同样的问题。我有一个需要注入的外部微调器组件。这是我解决的方法：

<table className="table profit-withdrawal">
    <thead className="thead-default">
        <tr>
            <th>Nick Name</th>
            <th>Transfer to</th>
            <th>Details</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <DotsLoaderComponent variant="dark" dimension="large" />
            </td>
        </tr>
        {this.renderTableData()}
    </tbody>
</table>

所以我将微调框组件包裹在一个里面：

<tr>
    <td>YOUR COMPONENT HERE</td>
</tr>

Answer 2

validateDOMNesting(...): 不能作为 <div> 的孩子出现。我看到类似的错误你替换：标签<body> to <div>

Answer 3

组件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 {
    // ...
}

Answer 4

这可能不是您的情况，但可能是其他人的情况。这有点尴尬，但我遇到了这个问题，因为我导入了错误的组件：

import Table from 'react-bootstrap/Col'; <-- Is a Col not a Table

检查导入是否正确

如何解决警告：validateDOMNesting（...）：<div>不能作为以下子项出现

4 个答案: