2017-09-26 17 views
0

ResultsTableボタンをクリックしますhandleClick関数に希望の値を受け取りますが、setStateはgameIdを設定せずに残っ​​ていますが、どこが間違っていますか?私がログゲームをコンソールにしたら、それは私が持っているものです。何か助けてくれてありがとう。React setState関数は値を変更しません

class ResultsTableContainer extends Component { 
constructor(props) { 
super(props); 

this.state = { 
    tableConfig, 
    games: [], 
    gameId: "" 
}; 
} 

handleClick = event => { 
event.preventDefault(); 
const gameId = event.target.id; 
this.setState({ gameId }); 
console.log(this.state); 
}; 

currentContent =() => { 
if (this.state.gameId !== "") { 
    return <GameDetailsContainer gameId={this.state.gameId} />; 
} 

return (
    <ResultsTable 
    tableConfig={this.state.tableConfig} 
    games={this.state.games} 
    onButtonClick={this.handleClick} 
    /> 
); 
}; 
render() { 
return <div>{this.currentContent()}</div>; 
    } 
} 

export default ResultsTableContainer; 

ResultsTable.jsx

const ResultsTable = ({ games, tableConfig, onButtonClick }) => (
<Table> 
    ... 
<TableBody> 
    {games.map((game, index) => (
    ... 
     <button> 
      <Link 
      to={`/games/${game.id}`} 
      onClick={onButtonClick} 
      id={game.id} 
      > 
      Results 
      </Link> 
     </button> 
</TableBody> 
</Table> 
); 
export default ResultsTable; 
+0

後にコンソールを呼び出さないでください。これが最も一般的な反応です。 – jmargolisvt

+1

@jmargolisvt:OPがそれをやっているようです。彼らは*クラスフィールド*プロポーザルに矢印機能を使用しています。 –

+3

状態はすぐに更新されないので、 'this.setState({gameId}); console.log(this.state); 'は古い状態を記録します。代わりに 'this.setState({gameId}、()=> console.log(this.state));'を実行してください。 –

答えて

0

SETSTATE後(状態)ジュストをCONSOLE.LOGしないでください。 私はすべてが機能していると思います。

0

は右SETSTATE

あなたの `handleClick`機能をバインドする必要が
handleClick = event => { 
    event.preventDefault(); 
    const gameId = event.target.id; 
    this.setState({ gameId }); 
}