如何修复警告：validateDOMNesting(...)：<div> 不能作为孩子出现</div><div id="text_translate"><p>我将用户列表作为道具传递给 UserItem 组件，以迭代用户列表并将它们显示在表上。 列表显示正确，我的渲染返回中没有任何 div，但我仍然收到错误：index.js:1446 Warning: validateDOMNesting(...): cannot appear as a child of.</p><p> 尝试了网上找到的许多解决方案，但没有一个有效</p><p>用户管理代码：</p><pre> 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);</pre><p> 用户项目代码：</p><pre> 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;</pre><p> 我希望修复警告信息</p></div>

Question

im passing users list as a props to UserItem Component to make iterate on user list and displaying them on table. the list is displayed correctly and i dont have any divs in my render return but i still get the error: index.js:1446 Warning: validateDOMNesting(...): cannot appear as a child of.

tried many solutions found online but none of them worked

UsersManagement code:

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 code:

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;

i expect to to fix the warning message

Answer 1

Most likely the component Spinner renders a <div> as the outermost node. Check the implementation of it.

You implicitly render it inside <tbody> through the lines

<tbody>
    {usersList}
</tbody>

where usersList defaults to <Spinner /> when there are no users or loading is true . This is why get the error.

A fix would be to wrap the Spinner into a td that spans the whole row:

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

Answer 2

I had the same problem. I had a external spinner component that I needed to inject. This is how i solved it:

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

So I wrapped my spinner component inside a:

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

Answer 3

validateDOMNesting(...): cannot appear as a child of <div> . I see an error similar to this You replace : tag <body> to <div>

Answer 4

It may not be your case, but it may be someone else's. It's kind of embarrassing but I had this problem because I was importing the wrong component:

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

Check if the imports are correct

Answer 5

In case someone gets this error and use render like :

...

{usersData ? (
  Object.values(usersData)?.map((user: any) => (
    <div key={user?.id}>
      <tr>
        <td>{user?.id}1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </div>
  ))
) : (
  <Box>
    {' '}
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </Box>
)}

...

two mistakes here:

Box is a div, and tbody needs only tr, td, so remove div or Box from render to be like:

<table className="table-admin">
  <thead>
    <tr>
      <th className="th-a">ID</th>
      <th className="th-a">EMAIL</th>
      <th className="th-a">NAME</th>
      <th className="th-a"></th>
    </tr>
  </thead>
  <tbody>
    {usersData ? (
      Object.values(usersData)?.map((user: any) => (
        <tr key={user?.id}>
          <td>{user?.id}</td>
          <td>{user?.email}</td>
          <td>{user?.name}</td>
        </tr>
      ))
    ) : (
        <tr>
          <td>N/A</td>
        </tr>
    )}
  </tbody>
</table>

Answer 6

Alternative with React Portal. You could use React Portals to pass the component to another dom node. This technique works well with toasts, modals, spinners etc. kind of elements that can be used as individual dom nodes outside of the active elements. https://reactjs.org/docs/portals.html . Here is a great example how to use with: https://blog.yogeshchavan.dev/how-to-use-react-portal-to-create-custom-reusable-toast-component-in-react