javascript - ReactJS:更新组件时无法在 'removeChild' 上执行 'Node'

Question

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

描述:

• Portfolio.js

  我有一个应用程序，它有一个投资组合，其中显示了网站的项目。当您单击投资组合中的项目时，您将被重定向(使用 react-router)到单个项目。

• Project.js

  项目组件使用 fetch api 从服务器检索数据。这非常有效，因为当 url 指定要显示的项目时，如:/portfolio/project/:id，并根据收到的 id 正确获取和显示数据。

  <

• 检索到的数据

  通过 fetch api 检索的只是向服务器发出 AJAX POST 请求的结果，其唯一参数是项目 ID，它只返回项目的信息。 (名称、描述、图片和其他不太重要的)

问题:

据我分析应用程序以查看何时触发此错误，我发现当加载的新项目的图像量小于已呈现的项目的图像量时，会出现此警告。

例子:

我们在一个项目中。 url 是 portfolio/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

我目前正在寻找解决此问题的方法，但如果有人可以给我建议或问题的根源，那将非常有帮助。

Answer 1

在您的问题发布时，reactjs github repo 上出现了一个讨论类似问题的问题。现在已解决，但您可能需要阅读 the article .