Native Requisiten reagieren, die nicht aktualisiert werden

Question

Ich bin ziemlich neu in React und ich habe ein Problem mit der Aktualisierung meiner Requisiten in einem Container. Ich aktualisiere meinen Zustand mit WebSockets und die Requisiten werden in meiner Funktion mapStateToProps aktualisiert, aber mein componentWillReceiveProps wird trotzdem nicht aufgerufen.

Wenn die Buchsen senden, ruft updateGameVariables eine Aktion auf, die die ausgegebenen Daten sendet, die dann an meinen Reduzierer geht, der den Spread Operator verwendet, um den Status zu aktualisieren. Und dann protokolliert mapStateToProps die richtigen Daten (die aktualisiert werden).

Hier ist die Hauptdatei, mit denen ich zu tun (alles richtig wird importiert Ich wollte nur auf Code reduzieren):

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) 

Und hier ist die GameIntro Komponente, auf die verwiesen wird.

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> 
    ) 
} 

auch als Notiz, wenn ich die rand: Math.random() Funktion uncommented alles haben aktualisiert richtig. Und so habe ich das Gefühl, dass react einfach keine Updates für das Spiele-Array annimmt. Oder ich verstehe einfach kein Kernkonzept von React. Jede Hilfe würde sehr geschätzt werden!

Answer 1

Es ist wahrscheinlich, dass Sie in Ihrem Reducer-Code ein Mutationsproblem haben, und deshalb sehen Sie das Spiel-Array als das gleiche und entscheiden sich dann dafür, das Rendering nicht zu aktualisieren. Es wird erklärt, warum

help Reagieren, um zu erkennen, dass es in der Requisiten-Objekt aktualisieren und erneut Rendern auslösen.

http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html könnte helfen.