当我在里面使用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