Question

我无法在Stack Overflow上找到这个特定情况的答案，我不认为这是重复的。

我有一个用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>
    );
  }
}

我有两个不同的视图，一个包含表单，另一个包含列表。在表单页面上启动时，_onSubmit函数可以正常工作而不会发出警告。之后，我导航到列表页面，然后返回到表单页面并尝试再次提交表单。现在它发出警告：

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。请检查未定义组件的代码。

此外，已卸载的和已安装会在适当的时间记录在控制台中。

我正在使用React Router，因此可能会解决问题。

编辑：我还应该添加setState两次都有效，它只是第二次发出警告。

编辑：如果您取出GameActions.create(this.state)行，则不会发出警告。

为什么我只在我导航回表单而不是第一次时才收到错误？我该如何解决？

React Router Routes

 <Router history={hashHistory}>
    <Route path="/" component={Navbar}>
      <IndexRoute component={IndexPage} />
      <Route path="games" component={GamesIndexPage} />
      <Route path="games/create" component={GamesCreatePage} />
    </Route>
  </Router>

操作

export default class GameActions {
  static create(game) {
    Dispatcher.dispatch({
      actionType: GameConstants.CREATE,
      game: game
    });
  }
}

GamesCreatePage

"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 />
    );
  }
}

Answer 1

作为建议：尝试更改componentWillMount()内的组件状态，而不是constructor。还有一点要避免使用this.state = {}使用this.setState({})。

也许这不是你问题的直接答案，但改变这些东西再试一次，也许你会得到更多正确的结果。

请在建议的更改后发表评论，如果仍有一些问题，我会尽力提供帮助。

更改视图，警告：setState（...）：只能更新已安装或安装的组件

1 个答案: