未捕获(在承诺中)错误:无法找到ID为104的元素

时间:2018-03-27 04:13:10

标签: javascript reactjs

当我在里面使用setState然后保证我收到了这个错误:

Uncaught (in promise) Error: Unable to find element with ID 104.
    at invariant (invariant.js?4599:42)
    at precacheChildNodes (ReactDOMComponentTree.js?8ff5:101)
    at getNodeFromInstance (ReactDOMComponentTree.js?8ff5:177)
    at ReactDOMComponent.getHostNode (ReactDOMComponent.js?ab8a:949)
    at Object.getHostNode (ReactReconciler.js?399b:60)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js?9682:342)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js?9682:295)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js?ab8a:944)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js?ab8a:758)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js?ab8a:720)
    at Object.receiveComponent (ReactReconciler.js?399b:122)
    at Object.updateChildren (ReactChildReconciler.js?dd13:107)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js?9682:204)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js?9682:308)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js?9682:295)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js?ab8a:944)

整个组成部分:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import Helmet from 'react-helmet'
import Header from '../components/Header'
import Menu from '../components/Menu'
import Slider from '../components/Slider'
import Advertisement from '../components/Advertisement'
import Products from '../components/Products'
import Notice from '../components/Notice'
import Footer from '../components/Footer'
import Copyright from '../components/Copyright'
import {couponsService} from '../services'

//import '../assets/home/css/style.css'

class Intro extends Component {

  constructor(props) {
    super(props);

    this.getCoupons = this.getCoupons.bind(this);
    this.state = {coupons: {}};
  }

  render() {
    return (
      <div>
        <Helmet />
        <Header />
        <Menu />
        <Slider slider={this.state.coupons.slider} slider_images={this.state.coupons.slider_images} />
        <Advertisement />
        <Products />
        <Notice />
        <Footer />
        <Copyright />

      </div>


    )
  }


  componentDidMount() {
    this.getCoupons();
   }


   getCoupons(){
     couponsService.getAll(1)
         .then(
             (coupons) => {
               console.log(coupons);
               this.setState({
                           coupons: coupons
                       });
               //  history.push('/');
             },
             error => {
                // dispatch(failure(error));
                 //dispatch(alertActions.error(error));
             }
         );
   }

}

function mapStateToProps() {
  return {}
}

export default connect(mapStateToProps)(Intro)

滑块组件:

import React, { Component } from 'react'
import { Link } from 'react-router'
import Shopname from '../components/product/Shopname'
import Description from '../components/product/Description'
import Countdown from '../components/product/Countdown'


class Slider extends Component {

  constructor(props) {
    super(props);

    this.state = {slider_images: []}
  }

  componentWillMount() {
     this.setState({ slider_images : this.props.slider_images });
}


  render() {
    return (
      <section id="main">
          <div className="container-fluid">
              <div className="col-md-3 hidden-xs hidden-sm" id="sideMenu">
                  <ul className="list-unstyled">
                      <a href="#">
                          <li className="active">
                              <span><i className="fa fa-th"></i></span><span>همه</span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-cutlery"></i></span><span>رستوران و کافی شاپ </span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-dribbble"></i></span><span>تفریحی و ورزشی</span>

                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-stethoscope"></i></span><span>پزشکی و سلامت</span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-film"></i></span><span>فرهنگی و هنری</span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-leaf"></i></span><span>آرایشی و زیبایی</span>
                          </li>
                      </a>
                      <a href="#">
                          <li className="last-child">
                              <span><i className="fa fa-tags"></i></span><span>کالا</span>
                          </li>
                      </a>
                  </ul>
              </div>
              <div className="col-sm-12 col-md-9" id="bestOffer">
                  <div className="col-sm-7 col-sm-push-5 left">
                      <div className="owl-one owl-carousel owl-theme">
                      {this.state.slider_images? (
                        <p>ok</p>
                      ) : (
                        <p>ooops</p>
                      )}

                      </div>
                  </div>
                  <div className="col-sm-5 col-sm-pull-7 right">
                      <div className="head">
                          <Shopname title="باغ رستوران سفره ایران"/>
                          <h4>منوی باز باغ رستوران سفره ایرانی</h4>
                          <div className="subtitle">

                          <Description title="سفره ایرانی و پرداخت تنها ۷۵۰۰ تومان به جای ۱۵۰۰۰ تومان . شادیاب لحظه ای :‌ سفره ایرانی و پرداخت تنها ۷۵۰۰ تومان به جای ۱۵۰۰۰ تومان " />

                          </div>
                      </div>
                      <div className="discount">
                          <div className="info">
                              <div>
                                  <img src="assets/home/img/icons/heartbeat.svg" /><span>خرید</span><span>۱۵</span>
                              </div>
                              <div>
                                  <i className="fa fa-map-marker"></i><span>تهران</span>
                              </div>
                          </div>
                          <div className="price">
                              <div>
                                  <strike>۱۵۰۰۰</strike>
                              </div>
                              <div>
                                  <span>۷۵۰۰</span><span>تومان</span>
                              </div>
                          </div>
                          <div className="bullet">
                              <span>٪۵۰</span>
                          </div>
                      </div>
                      <hr />
                      <Countdown />
                      <hr />
                      <div className="button">
                          <a href="#"><button><img src="assets/home/img/icons/ic_shopping_cart_24px.svg" />سبد خرید</button></a>
                          <a href="details_page.html"><button><img src="assets/home/img/icons/details.svg" />جزئیات</button></a>
                      </div>
                  </div>
              </div>
          </div>
      </section>
    )
  }
}

export default Slider

0 个答案:

没有答案