时间戳

首页 > 解决方案 > ReactJS：更新组件时无法在“节点”上执行“removeChild”

javascript - ReactJS：更新组件时无法在“节点”上执行“removeChild”

问题描述

尝试使用从服务器获取的新数据更新组件时，我不断收到此错误。

描述：

问题：

到目前为止，我已经分析了应用程序以查看何时触发此错误，我发现当加载的新项目的图像数量小于已渲染项目的图像数量时，会出现此警告。

一个例子：

我们在一个项目中。urlportfolio/project/1和服务器返回的数据表明这个项目有 5 张图片。它们已加载，您可以正确查看项目。

现在，我们使用菜单 react-router-redirect 到portfolio/project/2，服务器返回 7 张图像的数据。它们被加载并且项目数据也被加载以查看项目。

因此，假设我们选择菜单中的选项来查看portfolio/project/3具有 3 张图像的项目，然后出现警告。

浏览器： 错误内容 控制台日志： 控制台日志

编码：

由于错误表明问题出在 Project.js 内部，因此我仅添加此代码，因此问题看起来不会超载且充满奇怪的代码。

项目.js

import React,{Component} from 'react'
import Footer from '../Footer/Footer'
import Header from '../Header'
import SubNav from '../SubNav'
import Details from './Details'
import {Link} from 'react-router-dom'
import {Configurations} from '../AppConfig'

class Project extends Component{

state = {
            projectInfo: null,
            reloadHandlerActive: false,
            projectID : this.props.match.params.id,
            projectName: "",
            topProjectInfo: [],
            images: []
}

createImages = (project) =>{
  let Images = Object.values(project.images),
      ImagesURI = Images.map((img, index)=>{
        if( img.includes('Desarrollos.jpg') || img.includes('Home.jpg') || img.includes('H.jpg') ){
          return null
        }
      return project.path+img
      })
  ImagesURI = ImagesURI.filter(function (e) { //Clear null values
    return e != null;
  })
  return ImagesURI
}

    reloadHandler = (id) =>{
      const {createImages} = this
      fetch(Configurations.API.projectInfo(id))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
              this.setState({
                projectInfo: project,
                images: createImages(project)
              },function(){
                document.getElementsByClassName("nav-button")[0].click()
              })
          }
        })
    }

    componentWillMount(){
      const {createImages} = this
      fetch(Configurations.API.projectInfo(this.state.projectID))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
            this.setState({
              projectInfo: project,
              images: createImages(project)
            },function(){
              window.initDogma()
            })
          }
        })
    }

    componentDidMount(){
      window.onload = window.initShit()
    }

    render(){
      const {projectInfo,images} = this.state
      console.log(projectInfo)

      if(!projectInfo){
        return(<h1>. . .</h1>)
      }
      return(
          <div >
              <Header />
              <SubNav reloadHandler={this.reloadHandler} />
              <div className="content full-height no-padding">

              <div className="fixed-info-container">
              <Link to="/portfolio"><button className="goBackBtn">Desarrollos</button></Link>
                <h3>{projectInfo.project.project}</h3>
                  <div className="separator" />
                  <div className="clearfix" />
                  <p>
                    {projectInfo.project.address}
                  </p>
                  <span className="project-status">{projectInfo.project.status}</span>
                  <h4>Características</h4>
                  <Details price={projectInfo.project.price} features={projectInfo.project.features} />
                  <Link className=" btn anim-button   trans-btn   transition  fl-l" to={"/contact/?project="+projectInfo.id}> 
                    <span>Informes</span>
                    <i className="fa fa-eye" />
                  </Link>
                  </div>


              {/*  fixed-info-container end*/}
              {/*  resize-carousel-holder*/}
              <div className="resize-carousel-holder vis-info gallery-horizontal-holder">
                {/*  gallery_horizontal*/}
                <div
                  id="gallery_horizontal"
                  className="gallery_horizontal owl_carousel"
                >
                  {
                    images.map((img,index)=>{
                      return (
                      <div key={index}className="horizontal_item">
                        <div className="zoomimage">
                          <img src={img} className="intense" alt="" />
                          <i className="fa fa-expand" />
                        </div>
                        <img src={img} alt="" />
                        <div className="show-info">
                          <span>Info</span>
                          <div className="tooltip-info">
                            <h5>Imagen de muestra</h5>
                            <p>
                              Imagen del desarrollo
                            </p>
                          </div>
                        </div>
                      </div>
                      )
                    })
                  }
                </div>
                {/*  resize-carousel-holder*/}
                {/*  navigation */}
                <div className="customNavigation">
                  <a href="/" className="prev-slide transition">
                    <i className="fa fa-angle-left" />
                  </a>
                  <a href="/" className="next-slide transition">
                    <i className="fa fa-angle-right" />
                  </a>
                </div>
                {/*  navigation end*/}
              </div>
              {/*  gallery_horizontal end*/}
            </div>
            <Footer />
            </div>
        )
    }
}
export default Project

我目前正在寻找如何解决这个问题，但如果有人能给我一个建议或者问题的根源会非常有帮助。

标签： javascriptreactjs

解决方案

当您发布您的问题时，reactjs github repo 上出现了一个关于类似问题的问题。现在已解决，但您可能需要阅读文章。

推荐阅读