javascript - 不变违规 : processUpdates(): Unable to find child 0 of element

Question

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

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 0 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with 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> 而生成的或 <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 以便更容易找到你的问题