react-rails：創建記錄后組件不會重新渲染

Question

當我在學習教程時，我試圖在通過 AJAX 調用創建新記錄（游戲）后重新渲染我的 GamesBox。

記錄被保存，我可以通過刷新看到它，但這似乎不是 React 的方式......

容器 ：

 var GamesBox = React.createClass ({ getInitialState: function(){ return { game: this.props.games } }, parentGameSubmit (formData){ $.ajax({ url: "/games", dataType: 'json', type: 'POST', data: formData, success: function(games) { this.setState({games: games}); }.bind(this), error: function(response, status, err) { console.log(this.props.url, status, err.toString()) }.bind(this) }); }, render () { return ( <div> <h1> Hey everyone </h1> <Game games={this.state.game} /> <GameForm parentGameSubmit={this.parentGameSubmit}/> </div> ); } });

游戲列表呈現：

 var Game = React.createClass({ renderProjectRows: function(){ return( this.props.games.map(function(game){ return( <div className="row" style={{marginTop: "20px"}} key={game.id}> <div className="col-sm-2"> <h2 className="text-center" key={game.id}><a href={"/games/" + game.id}> {game.name} </a></h2> </div> </div> ) }) ); }, render: function() { return( <div> <div className="row" style={{marginTop: "50px"}}> <div className="col-sm-2"> </div> <div className="col-sm-2" style={{fontWeight: "bold"}}> Name </div> </div> {this.renderProjectRows()} </div> ); } });

形式 ：

 var GameForm = React.createClass({ getInitialState: function(){ return {name: ""}; }, resetState: function(){ this.setState({name: ""}); }, newGameSubmit: function(e){ e.preventDefault(); this.props.parentGameSubmit({game: {name: this.state.name, white_castling: this.state.white_castling, black_castling: this.state.black_castling}}, this.resetState); this.setState({name: ''}); }, handleNameChange: function(e){ this.setState({name: e.target.value}); }, renderGameNameField: function(){ return( <div className='row'> <div className='col-sm-4'> <div className= 'form-group'> <input name="game[name]" type="string" placeholder="Game name" value={this.state.name} onChange={this.handleNameChange} className="string form-control" /> </div> </div> </div> ); }, render: function() { return( <div> <h4 style={{marginTop: "50px"}}> Create New Game </h4> <form style={{marginTop: "30px"}} onSubmit={this.newGameSubmit}> <div className='form-inputs'/> {this.renderGameNameField()} <div className='row'> <div className='col-sm-4'> <input type="submit" value="Save" className='btn btn-primary' /> </div> </div> </form> </div> ); } });

游戲控制器：

 class GamesController < ApplicationController before_action :authenticate_user! def index @game = Game.all end def new @game = Game.new end def create @game = Game.new(game_params) respond_to do |format| if @game.save @game.update(white_user_id: current_user[:id]) format.html { redirect_to @game, notice: 'Project was successfully created.' } format.json { render json: Game.all.order(:name)} else format.html {render :new} end end end private def game_params params.require(:game).permit(:name, :white_castling, :black_castling) end end

請用見解打我

Answer 1

1. 你在游戲和游戲之間不斷地交流。 即game: this.props.games在GameBox組件。 如果它是一個數組，那么你應該使用游戲。 （我假設這是真的，因為您在Game組件中使用了地圖函數）。
2. 當發送成功的 ajax 時，您正在更新游戲狀態，而不是您實際使用的游戲狀態。

如果你想要一個超級快速的修復，你可以改變this.setState({games: games}); 到this.setState({game: games}); 在您的parentGameSubmit函數中。

Answer 2

除了你的表格，一切看起來都不錯。 當您在事件處理程序中時范圍更改，您必須綁定您的上下文。

onChange={this.handleNameChange.bind(this)}

和

onSubmit={this.newGameSubmit.bind(this)}

試試這個：

 var GameForm = React.createClass({ getInitialState: function(){ return {name: ""}; }, resetState: function(){ this.setState({name: ""}); }, newGameSubmit: function(e){ e.preventDefault(); this.props.parentGameSubmit({game: {name: this.state.name, white_castling: this.state.white_castling, black_castling: this.state.black_castling}}, this.resetState); this.setState({name: ''}); }, handleNameChange: function(e){ this.setState({name: e.target.value}); }, renderGameNameField: function(){ return( <div className='row'> <div className='col-sm-4'> <div className= 'form-group'> <input name="game[name]" type="string" placeholder="Game name" value={this.state.name} onChange={this.handleNameChange.bind(this)} className="string form-control" /> </div> </div> </div> ); }, render: function() { return( <div> <h4 style={{marginTop: "50px"}}> Create New Game </h4> <form style={{marginTop: "30px"}} onSubmit={this.newGameSubmit.bind(this)}> <div className='form-inputs'/> {this.renderGameNameField()} <div className='row'> <div className='col-sm-4'> <input type="submit" value="Save" className='btn btn-primary' /> </div> </div> </form> </div> ); } });