Forms 更改视图,警告:设置状态(…):只能更新已安装或正在安装的组件

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)

我找不到关于堆栈溢出的具体情况的答案,我不认为这是重复的

我有一个内置的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) {
    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 />
    );
  }
}