Forms 更改视图,警告:设置状态(…):只能更新已安装或正在安装的组件
我找不到关于堆栈溢出的具体情况的答案,我不认为这是重复的 我有一个内置的React表单组件,如下所示:Forms 更改视图,警告:设置状态(…):只能更新已安装或正在安装的组件,forms,reactjs,state,react-router,lifecycle,Forms,Reactjs,State,React Router,Lifecycle,我找不到关于堆栈溢出的具体情况的答案,我不认为这是重复的 我有一个内置的React表单组件,如下所示: "use strict"; import React from "react"; import GameActions from "./../../actions/games"; import lodash from "lodash"; export default class GamesForm extends React.Component { constructor(props)
"use strict";
import React from "react";
import GameActions from "./../../actions/games";
import lodash from "lodash";
export default class GamesForm extends React.Component {
constructor(props) {
super(props);
this.state = this._getInitialState();
this._getInitialState = this._getInitialState.bind(this);
this._onChange = this._onChange.bind(this);
this._onSubmit = this._onSubmit.bind(this);
}
componentWillUnmount() {
console.log("unmounted");
}
componentDidMount() {
console.log("mounted");
}
_getInitialState() {
return {
game: {
homeTeam: "",
homeTeamScore: 0,
visitingTeam: "",
visitingTeamScore: 0,
date: new Date(),
parkName: "",
city: "",
state: "",
tournament: "",
sanction: ""
}
};
}
_onChange(e) {
e.preventDefault();
var newState = lodash.cloneDeep(this.state);
newState.game[e.target.name] = e.target.value;
this.setState(newState);
}
_onSubmit(e) {
e.preventDefault();
GameActions.create(this.state);
this.setState(this._getInitialState);
}
render() {
return (
<form onSubmit={this._onSubmit}>
<div className="form-group">
<div className="row">
<div className="col-xs-10">
<label for="homeTeam">Home Team</label>
<input name="homeTeam" className="form-control input-md" value={this.state.game.homeTeam} onChange={this._onChange} autofocus={true} />
</div>
<div className="col-xs-2">
<label for="homeTeamScore">Score</label>
<input name="homeTeamScore" className="form-control input-md" value={this.state.game.homeTeamScore} onChange={this._onChange} />
</div>
</div>
</div>
<div className="form-group">
<div className="row">
<div className="col-xs-10">
<label for="visitingTeam">Visiting Team</label>
<input name="visitingTeam" className="form-control input-md" value={this.state.game.visitingTeam} onChange={this._onChange} />
</div>
<div className="col-xs-2">
<label for="visitingTeamScore">Score</label>
<input name="visitingTeamScore" className="form-control input-md" value={this.state.game.visitingTeamScore} onChange={this._onChange} />
</div>
</div>
</div>
<hr />
<div className="form-group">
<div className="row">
<div className="col-xs-12">
<label for="date">Date</label>
<input name="date" className="form-control input-md" placeholder="03/27/2016" value={this.state.game.date} onChange={this._onChange} />
</div>
</div>
</div>
<hr />
<div className="form-group">
<div className="row">
<div className="col-xs-12">
<label for="parkName">Park Name</label>
<input name="parkName" className="form-control input-md" placeholder="ex. Riverview Park, Patriots Park" value={this.state.game.parkName} onChange={this._onChange} />
</div>
<div className="col-xs-6">
<label for="parkCity">City</label>
<input name="parkCity" className="form-control input-md" value={this.state.game.parkCity} onChange={this._onChange} />
</div>
<div className="col-xs-6">
<label for="parkState">State</label>
<select name="parkState" className="form-control input-md" defaultValue="0" value={this.state.game.parkState} onChange={this._onChange}>
<option value="0" disabled>Select one</option>
<option value="AK">Alaska</option>
</select>
</div>
</div>
</div>
<hr />
<div className="form-group">
<div className="row">
<div className="col-xs-8">
<label for="tournamentName">Tournament Name</label>
<input name="tournamentName" className="form-control input-md" placeholder="ex. Winter Bump" value={this.state.game.tournamentName} onChange={this._onChange} />
</div>
<div className="col-xs-4">
<label for="tournamentSanction">Sanction</label>
<input name="tournamentSanction" className="form-control input-md" placeholder="ex. USSSA" value={this.state.game.tournamentSanction} onChange={this._onChange} />
</div>
</div>
</div>
<hr />
<div className="form-group">
<button type="submit" className="btn btn-lg btn-success btn-block">Submit</button>
</div>
</form>
);
}
}
行动
export default class GameActions {
static create(game) {
Dispatcher.dispatch({
actionType: GameConstants.CREATE,
game: game
});
}
}
游戏创建页面
"use strict";
import React from "react";
import GamesForm from "./../../components/games/form.jsx";
export default class GamesCreatePage extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<GamesForm />
);
}
}
建议:尝试更改componentWillMount中的组件状态,而不是构造函数。 还有一点要避免使用this.state={}使用this.setState{} 也许这不是对你的问题的直接回答,但改变这些东西,再试一次,也许你会得到更合适的结果
请在建议的更改后发表评论,如果仍有一些要点,我将尽力提供帮助。您是否也可以添加您的路由?你的游戏动作是什么。创建动作在做什么?可能它触发了路由更改,所以您的组件将被卸载,然后您调用setState?@fabio.sussetto刚刚添加了它们!谢谢,您还可以向我们展示GamesCreatePage的内容吗?我想这会反过来呈现您的GamesForm组件,因为后者不是路由组件?@fabio.sussetto done!在ES6+中,可以使用this.state={};,但是,当您改变状态时,您应该使用this.setState,这是正确的。请参阅
"use strict";
import React from "react";
import GamesForm from "./../../components/games/form.jsx";
export default class GamesCreatePage extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<GamesForm />
);
}
}