ネイティブの小道具を更新しない

Question

私はReactにはかなり新しく、私は小道具をコンテナで更新することに問題があります。 WebSocketを使用して状態を更新していて、mapStateToProps関数でその小道具が更新されていますが、それにもかかわらず、私のcomponentWillReceivePropsは呼び出されていません。

ソケットが放出されると、updateGameVariablesは放出されたデータを送信するアクションを呼び出し、次にそれをスプレッドオペレータを使用して状態を更新するマイレッサーに送ります。次に、mapStateToPropsは適切なデータ（更新中）をログに記録します。

class GameList extends Component { 
    constructor(props){ 
     super(props); 
     this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2}) 
     const { games } = props; 
     this.state = { 
      games: this.ds.cloneWithRows(games) 
     } 
     this.socket = SocketIOClient('http://localhost:9615',{ transports: ['websocket'], query: 'r_var=17' }); 
     this.socket.on('appGames', function(results){ 
      props.dispatch(updateGameVariables(results)) 
     }); 
    } 

    componentWillReceiveProps(nextProps){ 
     this.setState({ 
      games: this.ds.cloneWithRows(nextProps.games) 
     }) 
    } 

    render() { 
     let { games } = this.state; 
     return (
      <View style={styles.list}> 
       <ListView 
        dataSource={games} 
        renderRow={(rowData, sectionID, rowID) => 
         <TouchableOpacity> 
          <GameIntro key={rowID} game={rowData} /> 
         </TouchableOpacity> 
        } 
       > 
       </ListView> 
     </View> 
     ) 
    } 
} 

function mapStateToProps({games}){ 
    return { 
     games: games.games, // Array 
     // rand: Math.random() 
    } 
} 

function mapDispatchToProps(dispatch) { 
    let actions = bindActionCreators({ updateGameVariables }); 
    return { ...actions, dispatch }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(GameList) 

そして、ここで参照されているGameIntroコンポーネントです：

は、ここで（すべてが正常にインポートされている私は、コードを削減したかった）私が扱っていますメインファイルです。

export default props => { 
    let { game } = props; 
    return (
     <View style={styles.itemContainer}> 
      <View style={styles.game_timerow}> 
       <Text style={styles.game_time}>{game.period} {game.minutes}:{game.seconds}</Text> 
      </View> 
     </View> 
    ) 
} 

メモとして、 rand: Math.random()の機能をアンコメントすると、すべてが正しく更新されます。そして、私は反応がゲーム配列の更新を拾っていないように感じます。あるいは、私はReactの核心概念を理解していないだけです。どんな助けでも大歓迎です！

Answer 1

あなたのレデューサーコードに突然変異の問題があり、そのリアクションがゲーム配列を同じものと見なしているため、レンダリングを更新しないことにします。それは理由を説明します

rand: Math.random() 

助けてくださいpropsオブジェクトとトリガーの再レンダリングに更新があることに気付いてください。

http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.htmlが参考になる場合があります。