不变违规：processUpdates（）：找不到元素的子 0

Question

我在页面加载时随机出现以下错误。

未捕获的错误：不变违规：processUpdates()：无法 找到元素的子 0。这可能意味着 DOM 出乎意料 突变（例如，由浏览器），通常是由于忘记了 使用表格时，嵌套标签，如 <form>、<p> 或 <a>，或使用 <svg> 父级中的非 SVG 元素。尝试检查子节点 React ID .0.1.3 的元素。

我可以在那里看到空的p，但不知道如何处理它或如何解决这个问题。 React 不会每次都抛出这个错误。

代码如下：

var React = require('react'),
    projectData = require('./../../projects.json'),
    projects = projectData.projects;

var Project = React.createClass({
    getCurrentProject: function() {
        for( var i =0; i < projects.length; i++) {
            if(projects[i].id == this.props.params.id) {
                return projects[i];
            }
        }
    },  

    getNextProjectId: function() {
        var currentPrj = this.getCurrentProject();
        var nextPrjId;

        if(currentPrj.id == 1) {
            nextPrjId = projects.length;    
            return nextPrjId;
        } else {
            nextPrjId = currentPrj.id - 1; 
            return nextPrjId;
        }
    },

    render: function() {
        var currentProject = this.getCurrentProject(),
            nextProject

        return(
            <div>
                <div className="jumbotron">
                    <div className="container">
                        <h1>{currentProject.title}</h1>
                    </div>  
                </div>  
                <div className="container">
                    <p className="text-center eeeBackground"> <img id="projectImg" src={currentProject.image} alt="Project Image" /></p>
                    <br />
                    <div dangerouslySetInnerHTML={{__html: currentProject.HTMLdescription}} />      
                    <p>
                        {/* JSX if else condition*/ }
                        {(currentProject.link
                            ? <p id="website-link"><a target="_blank" href={currentProject.link}>
                                <span className="glyphicon glyphicon-menu-right">Visit Website </span>
                              </a></p>
                            : <br />
                        )}
                    </p>
                    <p> 
                        <h3>Technology Stack</h3>
                        <div id="skills">
                            {currentProject.skills.map(function(key, i){
                                return <span key={i} className="label label-default"> {key} </span>
                            })}
                        </div>              
                    </p>
                    <p className="text-right">
                        <a href={'#/project/'+this.getNextProjectId()}>
                            <span className="glyphicon glyphicon-menu-right">Next Project &nbsp;&nbsp;&nbsp;</span>
                        </a>
                    </p>
                </div>
            </div>
        ); 
    }
});

module.exports = Project;

更新 嵌套的 p 标签导致问题。将它们替换为div，问题已得到修复。

Answer 1

您的空<p> 标记是由于尝试在<p> 标记中包含其他<p> 或<div> 标记而生成的。您应该将它们包装在 div 中

 <p>
        {/* JSX if else condition*/ }
        {(currentProject.link
            ? <p id="website-link"><a target="_blank" href={currentProject.link}>
            <span className="glyphicon glyphicon-menu-right">Visit Website </span>
          </a></p>
        : <br />
    )}
</p>

这里

<p> 
    <h3>Technology Stack</h3>
    <div id="skills">
        {currentProject.skills.map(function(key, i){
            return <span key={i} className="label label-default"> {key} </span>
        })}
    </div>              
</p>

我不确定这会解决你所有的问题，但它至少应该清理 DOM 以便更容易找到你的问题