繁体   English   中英

如何摆脱这个警告:“警告:validateDOMNesting(...)”?

[英]How to get rid of the this warning: "Warning: validateDOMNesting(...)"?

我正在尝试在我的 React 应用程序中实现一个功能组件: https : //gist.github.com/andreisamoila74/bca55271c3992c079eed018e5c95a1be这些是警告:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ViewCode`
    in Fragment
    in ViewCode (at App.js:87)
    in Route (at App.js:86)
    in Switch (at App.js:72)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at App.js:71)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at App.js:68)
    in App (at src/index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:12)
    in Suspense (at src/index.js:11)
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
    in tr (at View.js:49)
    in div (at View.js:48)
    in tbody (at View.js:93)
    in table (at View.js:92)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at View.js:91)
    in div (at View.js:90)
    in ViewCode (at App.js:87)
    in Route (at App.js:86)
    in Switch (at App.js:72)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at App.js:71)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at App.js:68)
    in App (at src/index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:12)
    in Suspense (at src/index.js:11)
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.
    in div (at View.js:48)
    in tbody (at View.js:93)
    in table (at View.js:92)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at View.js:91)
    in div (at View.js:90)
    in ViewCode (at App.js:87)
    in Route (at App.js:86)
    in Switch (at App.js:72)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at App.js:71)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at App.js:68)
    in App (at src/index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:12)
    in Suspense (at src/index.js:11)

我理解每个警告,但我不确定如何摆脱它。 关于表格,我需要这些 div,以便我的 AddComment 组件以正确的方式放置。 我应该如何解决这个问题? 谢谢 :)

反应键需要在映射的最外层元素上声明。 在您的情况下, Fragment ,或者更确切地说是div因为Fragment对您没有太大作用。

第二个错误:“validateDOMNesting(...): 不能作为“的孩子出现是说tr不能是div的孩子。

您仍然可以使用Fragment来返回单个节点提供反应键。

data.code.source_code.split("\n").forEach((line, index) => {
  rows.push(
    <Fragment key={index}> // <-- attach react key to Fragment
      <tr className="line">
        <td className="line-number">{index + 1}</td>
        <td id={"plus" + index} className="plus-square-line">
          <PlusSquareTwoTone
            className="plus-square"
            onClick={() => toggleLineCommentStatus(index + 1)}
          />
        </td>
        <td
          id={"codeblock" + index}
          className={"language-" + codeLanguage}
          style={rowStyle}
        >
          {line}
        </td>
      </tr>
      <div style={divStyle}>
        {lineComments[index + 1] ? (
          <AddComment
            id={id}
            lineNumber={index + 1}
            onCancelLineCommentShow={toggleLineCommentStatus}
          />
        ) : null}
      </div>
    </Fragment>
  );
});

当你创建一个孩子的数组时,比如第 46 行,他们每个人都需要有一个key道具。

如果没有它,React 就没有办法知道新旧数组的不同之处,因此它必须重新渲染所有子级,这是性能拖累。 使用key prop,它通过比较新的和旧的孩子数组中的键来检查新的或删除的孩子。

你可以在这里阅读它https://kentcdodds.com/blog/understanding-reacts-key-prop

我是这样解决的:

rows.push(
  <React.Fragment key={index}>
    <tr key={index} className="line">
      <td className="line-number">{index + 1}</td>
      <td id={"plus" + index} className="plus-square-line">
        <PlusSquareTwoTone className="plus-square"
          onClick={() => toggleLineCommentStatus(index + 1)} />
      </td>
      <td id={"codeblock" + index}
        className={'language-' + codeLanguage} style={rowStyle}>
        {line}
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        {lineComments[index + 1]
          ?
          <AddComment
            id={id}
            lineNumber={index + 1}
            onCancelLineCommentShow={toggleLineCommentStatus}
          />
          :
          null
        }
      </td>
    </tr>
  </React.Fragment>
);

谢谢你的回答

如何修复警告: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>

[英]How to fix Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何摆脱 Highcharts 警告 validateDOMNesting(…):<button>警告</button> 如何摆脱这个 Facebook 像素警告? 如何摆脱有关缺少依赖项的警告 警告:validateDOMNesting(...):<a>不能作为后代出现</a> 如何修复警告: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> 如何修复此警告 - 警告:validateDOMNesting(...): <a>cannot appear as a descendant of</a> <a>.</a> <a>下面是我的代码</a> 如何在Ionic / Cordova Emulator中摆脱Facebook警告? 如何在 React 应用程序中摆脱“函数作为 React 子项无效”警告 如何摆脱警告“类型……不可分配给类型”打字稿
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM