Question

我在页面加载时随机收到以下错误。

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

enter image description here

我可以在那里看到空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>或<div>标记时会生成空<p>代码。你应该把它们换成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以使其更容易找到您的问题

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

1 个答案: