反应本机道具不更新

Question

我对React非常陌生，我遇到了更新容器中道具的问题。我正在使用WebSockets更新我的状态，并且在我的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

您的Reducer代码中可能存在突变问题，并且由于React将游戏阵列视为相同，因此决定不更新渲染。它解释了为什么

rand: Math.random() 

帮助意识到props对象中有更新并触发重新呈现。

http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html可能会有所帮助。