デベロッパーツールのコンポーネント状態の更新は、後でthis.stateを呼び出すときではない

Question

現在選択されている行の状態をstateに保持するデータテーブルにmaterial-ui controlled tableの例を使用するコンポーネントがあります。これは正常に動作しており、反応開発ツールで状態が正しく更新されているのがわかります。ただし、updatePickが呼び出されると、this.state.selectedは更新された値を返しません。

constructor(props) { 
    super(props); 
    this.state = { 
     selected: [], 
    } 
    } 

    isSelected = (index) => { 
    return this.state.selected.indexOf(index) !== -1; 
    } 

    handleRowSelection = (selectedRows) => { 
    this.setState({ 
     selected: selectedRows, 
    }) 
    } 


    updatePick =() => { 
    console.log(this.state.selected); //Shows [] 
    console.log(this.state.selected[0]); //undefined 
    this.props.updateTodaysPick(this.props.players[this.state.selected[0]]); 
    } 

は、開発ツールに反応 を選択することが私の状態を示しています[1]

私が研究し、ので、ここで私は除外することができますカップルの事ですしてきました。

1. これを機能に結びつけても役に立ちませんでした。私の理解は、矢印関数を使うことはこれの必要性を否定するということです。
2. 私はsetStateが同期的に起こらないことを知っています。 UpdatePickメソッドは直後に起動されていませんが、状態を更新するのに十分な時間があったため、別々に切り替える必要があります。

ここに私の機能をレンダリング

render() { 

    var players = this.props.players.slice(0, 40).map((player, index) => { 
      return (
      <TableRow key={index} selected={this.isSelected(index)}> 
       <TableRowColumn></TableRowColumn> 
       <TableRowColumn>{player.first_name} {player.last_name}</TableRowColumn> 
       <TableRowColumn>{player.team}</TableRowColumn> 
      </TableRow> 
     ) 
     } 
    ) 

    return (
     <div> 
     <div className="submit"><RaisedButton label="Update Player" secondary={true} onClick={this.updatePick} /></div> 
     <Table onRowSelection={this.handleRowSelection} preScanRows={false} fixedHeader={true}> 
      <TableHeader> 
      <TableRow> 
       <TableHeaderColumn>ID</TableHeaderColumn> 
       <TableHeaderColumn>Name</TableHeaderColumn> 
       <TableHeaderColumn>Status</TableHeaderColumn> 
      </TableRow> 
      </TableHeader> 
      <TableBody> 
      {players} 
      </TableBody> 
     </Table> 
     </div> 
    ); 
    } 

これはstackoverflowの上の私の最初の質問ですだ - うまくいけば、それは嗅ぎ次第です。

---

EDIT：これは、テーブルコンポーネントがフォーカスを失ったとき（送信ボタンをクリックする）行を選択解除するマテリアルUI設定です。これは、テーブルの小道具で設定できます。

Answer 1

Material UI Tableの既定の動作のために問題が発生しました。

お客様のTableは、<RaisedButton/>がclickedのたびにblurringです。

この結果、行が選択されていないthis.handleRowSelection()が呼び出され、this.state.selectionがクリアされます。 this.updatePick()を呼び出すことではなくonClickよりもonMouseDownを使用します：

<div className="submit"><RaisedButton label="Update Player" secondary={true} onMouseDown={this.updatePick} /></div> 

がblurを防ぐためにeventのparamに火preventDefault()、その後に必ず：blurringからあなたTableを防止するために

// Update Pick. 
updatePick = (event) => { 

    // Prevent Table from blurring. 
    event.preventDefault() 

    // Update Todays Pick. 
    this.props.updateTodaysPick(this.props.players[this.state.selected[0]]) 
}