警告：setState（...）：只能更新已安装或安装的组件。这个 通常意味着您在未安装的组件上调用了setState（）。 这是一个无操作。请检查GetStarted组件的代码。
这是我的代码：
export class GetStarted extends Component {
constructor(props) {
super(props)
this.state = {
open: false,
canSubmit: false,
freelancershow:false,
ifclient:false,
type:'',
phone: "",
show:true,
showOtp:false,
user:{},
client:{},
loggedin:'',
success:false,
message:'',
job_types :'',
rates:'',
techs:'',
id:'',
searchFor:'Freelancers',
userSearchTerm:'',
jobSearchTerm: [],
searchtypes:0,
freejobSearchTerm:'',
freeSearchTerm:'',
company_name:'',
dataSearch:[],
getskillarr: [],
searchString:'',
domainSearch: [],
skillArr:[],
chipData: [],
chipArr: [],
searchText: '',
dataSource: [],
userName: "",
admindata: []
}
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
this.chipData = this.state.chipData
const chipToDelete = this.state.chipData.map((chip) => chip.key)
this.chipData.splice(chipToDelete, 1)
this.setState({chipData: this.chipData})
/* dialog actions */
this.handleDialogClose = this.handleDialogClose.bind(this)
this.handleDialogOpen = this.handleDialogOpen.bind(this)
this.handleBackToApp = this.handleBackToApp.bind(this)
this.handleOpen=this.handleOpen.bind(this)
this.handleClose=this.handleClose.bind(this)
this.logout = this.logout.bind(this)
this.handleSearch = this.handleSearch.bind(this)
this.handleChange =this.handleChange.bind(this)
this.getskill = this.getskill.bind(this)
}
handleClose() {
this.setState({open: false});
}
onDatesChange({ startDate, endDate }) {
this.setState({ startDate, endDate })
}
onFocusChange(focusedInput) {
this.setState({ focusedInput })
}
componentWillMount() {
const { dispatch } = this.props
dispatch(GetBlogs())
dispatch(GetEvents())
dispatch(SearchSkills())
dispatch(GetAllFeaturedUsers())
}
componentWillReceiveProps(nextProps) {
this.setState({ admindata: nextProps.admindata})
if (nextProps.login.sendOtpResponse && nextProps.login.sendOtpResponse.success === false) {
this.setState({
showOtp: false,
err: nextProps.login.sendOtpResponse.message
})
} else if (nextProps.login.sendOtpResponse && nextProps.login.sendOtpResponse.success === true) {
this.setState({
showOtp: true,
phone: nextProps.login.sendOtpResponse.user.profile.phone.mobile
})
} else if (nextProps.login.verifyOtpResponse && nextProps.login.verifyOtpResponse.success === false) {
this.setState({
err: nextProps.login.verifyOtpResponse.message
})
} else if (nextProps.login.verifyOtpResponse && nextProps.login.verifyOtpResponse.success === true) {
this.setState({
success: nextProps.login.verifyOtpResponse.success,
open: false,
type: nextProps.login.verifyOtpResponse.user.type,
user: nextProps.login.verifyOtpResponse.user,
userName: nextProps.login.verifyOtpResponse.user.profile.name
})
} else if(nextProps.login.length > 0 && nextProps.login[0].message === 'skills found') {
let arr = []
for(var i = 0; i < nextProps.login[0].data.length; i++) {
arr.push(nextProps.login[0].data[i].label)
}
this.setState({skillArr:arr})
} else if(nextProps.login.length > 0 && nextProps.login[0].message === 'searchDomains found') {
let arr = []
for(var m = 0; m < nextProps.login[0].data.length; m++) {
arr.push(nextProps.login[0].data[m].name)
}
this.setState({ skillArr: arr })
} else if(nextProps.login.length > 0 && nextProps.login[0].message === 'searchDomains found') {
let arr = []
for(var n = 0; n < nextProps.login[0].data.length; n++) {
arr.push(nextProps.login[0].data[n].text)
}
this.setState({ skillArr: arr })
} else if(nextProps.login.length > 0 && nextProps.login[0].data) {
this.setState({ dataSearch: nextProps.login[0].data })
}
else {
this.setState({ open: true })
}
}
handleDialogClose() {
this.setState({ open: false })
}
handleDialogOpen() {
this.setState({ open: true })
}
handleOpen() {
this.setState({ open: true })
}
handleBackToApp() {
}
change_form(){
this.setState({ show: !this.state.show })
}
logout(){
if(!this.state.ifclient){
localStorage.clear();
window.location = "/"
} else {
localStorage.clear();
window.location = "/"
}
}
getskill(values) {
this.state.getskillarr.indexOf(values) > -1 ? this.state.getskillarr.splice(this.state.getskillarr.indexOf(values), 1) : this.state.getskillarr.push(values)
this.setState({getskillarr: this.state.getskillarr})
this.handleSearch()
}
handleSearch() {
var data = this.state
const { dispatch } = this.props
if(this.state.searchFor === "job") {
var newobj = {}
newobj.searchText = data.getskillarr
newobj.userSearchTerm = data.userSearchTerm
newobj.rates = data.rates || 'hourly'
newobj.type = 'job'
localStorage.setItem('HomepageSearchData', JSON.stringify(newobj))
} else {
var newobj2 = {}
newobj2.searchText = data.getskillarr
newobj2.userSearchTerm = data.userSearchTerm
newobj2.rates = data.rates || 'hourly'
newobj2.type = 'freelancer'
localStorage.setItem('HomepageSearchData', JSON.stringify(newobj2))
}
const route = '/filter-results'
browserHistory.push(route)
}
handleChange(type,e){
const state = this.state
if(type === 'userSearch') {
state.userSearchTerm = e.target.value
} else if(type === 'techs') {
state.jobSearchTerm.push(e.target.value)
} else if(type !== 'techs') {
state.domainSearch.push(e.target.value)
}
this.setState(state)
}
changeUser (value) {
const state = this.state
state.searchFor = value
this.setState(state)
this.setState({user: value})
}
render() {
var slide = this.state.admindata.length
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow:4,
slidesToScroll:1,
adaptiveHeight: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 1
}
}
]
}
var featuredSettings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow:4,
slidesToScroll:1,
adaptiveHeight: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 1
}
}
]
}
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
{
<div className="home-section">
<div className="container">
<div className="row">
<div className="col-md-12 col-xs-12">
<div className="new-search">
<h1 className="f-bold text-blue">Amgigs</h1>
<p className="sub-head">Find freelancers and contractors online at your timezone and close to your proximity.</p>
<div className="input-group">
<div className="input-group-btn">
<IconMenu
iconStyle={{color: '#999',padding:'0 important'}}
iconButtonElement={<IconButton id="icbtn"><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem onClick={this.changeUser.bind(this,'freelancer')} primaryText="Find Freelancer" />
<MenuItem onClick={this.changeUser.bind(this,'job')} primaryText="Find Job" />
</IconMenu>
</div>
{/* <input type="text" className="form-control" aria-label="..." placeholder="Search"/>*/}
<input type="text" className="form-control" aria-label="..." placeholder={this.state.searchFor} onChange={this.handleChange.bind(this,'userSearch')} value={this.state.userSearchTerm} />
<div className="input-group-btn">
{/*<button type="button" className="btn btn-primary">Search</button>*/}
<button type="button" id="homesearchbtn" className="btn btn-lg btn-primary" onClick={this.handleSearch}>Search</button>
</div>
</div>
</div>
<div className="col-md-8 col-md-offset-2 text-center">
<div className="category">
<h4>Search freelancers at any categories</h4>
{this.state.skillArr.map((skill, i) => {
return(
<button key={i} className="btn btn-success" onClick={this.getskill.bind(this, skill)}>{skill}</button>
)
})}
</div>
</div>
</div>
</div>
</div>
</div> }
<div className="container">
<div className="row">
<div className="col-md-12">
{this.state.admindata.length > 0 ?
<div>
<h3>Featured Freelancers</h3>
<Slider {...featuredSettings}>
{this.state.admindata.map(function(data,i){
return(<div className="parking-wrapper" key={i}>
<div className="parking-inner-container">
<div className="parking-inner">
<div className="parking-container">
<div className="parking-image-wrapper">
<div className="availability-btn">
<Link className="btn btn-primary text-white" target="_blank" to={'http://www.amgigs.com:2368'+data.url}>Chat Now</Link>
</div>
<div className="parking-image-cover" style={{ backgroundImage: `url(${data.profile.picture})` }}>
</div>
</div>
</div>
</div>
</div>
<div className="parking-info">
<div className="parking-title">
<h1>{data.profile.name}</h1>
</div>
<div className="parking-location">
<h2><EllipsisText text={data.email} length={'50'} /></h2>
</div>
</div>
</div>
)
})
}
</Slider>
</div>
: "" }
</div>
</div>
</div>
<div className="parking-section">
<div className="container">
<div className="row">
<div className="col-md-5 col-sm-5">
<div >
<h2>Hire expert freelancers for your job online</h2>
<p>Freelancers for thousands of jobs from web design, mobile app development, product design to manufacturing </p>
<Link to="/signup" className="btn btn-primary">Get Started with amgigs</Link>
</div>
</div>
<div className="col-md-7 col-sm-7">
<img className="img-responsive" src="https://membermouse.com/wp-content/uploads/2016/09/Freelancer-Liability-Featured.png" alt=""/>
</div>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-12">
<h3>Blogs</h3>
{this.props.blogdata.length > 0 ?
<Slider {...settings}>
{this.props.blogdata.map(function(data,i){
return(<div className="parking-wrapper" key={i}>
<div className="parking-inner-container">
<div className="parking-inner">
<div className="parking-container">
<div className="parking-image-wrapper">
<div className="availability-btn">
<Link className="btn btn-primary text-white" target="_blank" to={'http://www.amgigs.com:2368'+data.url}>Read more</Link>
</div>
<div className="parking-image-cover" style={{ backgroundImage: `url(http://www.amgigs.com:2368${data.image})` }}>
</div>
</div>
</div>
</div>
</div>
<div className="parking-info">
<div className="parking-title">
<h1>{data.title}</h1>
</div>
<div className="parking-location">
<h2><EllipsisText text={data.markdown} length={'70'} /></h2>
</div>
</div>
</div>)
})
}
</Slider>
: "" }
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-12">
<h3>Events</h3>
{this.props.eventdata.length > 0 ?
<Slider {...settings}>
{this.props.eventdata.map(function(data,i){
return(<div className="parking-wrapper" key={i}>
<div className="parking-inner-container">
<div className="parking-inner">
<div className="parking-container">
<div className="parking-image-wrapper">
<div className="availability-btn">
<Link className="btn btn-primary text-white" target="_blank" to={'http://www.amgigs.com:2369'+data.url}>Read more</Link>
</div>
<div className="parking-image-cover" style={{ backgroundImage: `url(http://www.amgigs.com:2369${data.image})` }}>
</div>
</div>
</div>
</div>
</div>
<div className="parking-info">
<div className="parking-title">
<h1>{data.title}</h1>
</div>
<div className="parking-location">
<h2><EllipsisText text={data.markdown} length={'70'} /></h2>
</div>
</div>
</div>)
})
}
</Slider>
: "" }
</div>
</div>
</div>
</div>
</MuiThemeProvider>
)
}
}
GetStarted.propTypes = {
children: PropTypes.node,
handleSubmit: PropTypes.func, // redux-form
pristine: PropTypes.bool, // redux-form
submitting: PropTypes.bool, // redux-form
dispatch: PropTypes.func, // redux
handleDialogClose: PropTypes.func, // close dialog
isSubmitting: PropTypes.bool,
err: PropTypes.string,
ifclient: PropTypes.bool,
showOtp: PropTypes.bool,
blogdata:PropTypes.array,
eventdata:PropTypes.array,
admindata : PropTypes.array,
}
const stateToProps = (state) => {
return {
login: state.login,
isSubmitting: state.login.submitting,
err: state.signup.err,
Clientid:state.signup.Clientid,
ifclient:state.ifclient,
userType:state.signup.userType,
showOtp:state.showOtp,
blogdata:state.blogs.data.data ? state.blogs.data.data.posts : [],
eventdata:state.events.data.data ? state.events.data.data.posts : [],
admindata : state.admin.data ? state.admin.data.data : []
}
}
export default connect(stateToProps)(GetStarted)
答案 0 :(得分：0)
请在构造函数中删除setState调用，而不是像对其他属性那样初始化状态。
“React组件的构造函数在安装之前被调用。”
https://facebook.github.io/react/docs/react-component.html#constructor