我对React很陌生,并且在更新容器中的prop时遇到问题。 我正在使用WebSockets更新状态,并且在mapStateToProps函数中更新了道具,但是尽管如此,我的componentWillReceiveProps并未被调用。

当套接字发出时, updateGameVariables调用一个Action发送发送的数据,然后将其转到使用Spread Operator更新状态的我的reducer。 然后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的核心概念。 任何帮助将不胜感激!

#1楼 票数:0

您的化简代码中可能存在突变问题,因此,由于React认为游戏数组相同,因此决定不更新渲染。 它解释了为什么

rand: Math.random()

帮助React意识到props对象中有更新并触发重新渲染。

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

  ask by RandyMarsh translate from so

未解决问题?本站智能推荐:

1回复

React Native-Redux〜不调用时更新道具

我在使用Redux时遇到React Native问题。 我正在使用Redux状态来显示/隐藏从一个组件到另一个组件的模式。 考虑到它是跨组件的,因此这似乎是最好的解决方案。 我的模式打开和关闭非常完美,并且显示效果完全一样。 但是,当我单击此按钮时,似乎父组件的道具再次被更新为初
1回复

React Native:在 props 改变时更新状态,并在内部通过 setState()

所以我有一个父组件,它将数据数组作为道具传递给子组件(子组件将此数组道具保存为自己状态的一部分),并且我希望子组件的状态在此道具更改时更新。 我使用 getDerivedStateFromProps 如下: 但是,我也希望能够通过setState()更新孩子内的状态。 但是,当我调用setSt
2回复

React Native:过滤道具?

我创建了一个基本组件,例如: 然后,我可以使用<Component title="Home" icon="home" />进行调用。 问题在于,将{...props}传递给TouchableOpacity产生错误,因为它无法正确识别标题或图标。 例如: JSON va
1回复

反应本地道具

我是React Native的新手。 我正在制作一个音乐应用,并且正在使用有效的react-native-track-player模块。 但是现在,我正在尝试将songlist作为道具从我的Flatlist到播放器组件。 所以首先,我能够表现出情绪。 然后,当我通过道具/移动到Son
1回复

反应原生道具管理

我正在使用 react-native-router-flux 在 react-native 中进行导航。 我的标签使用具有不同道具的相同组件。 第一个选项卡更改时一切正常,但返回相同选项卡时属性未更改。 返回同一个选项卡时应该使用什么方法? 应用程序.js 分类.js
1回复

反应原生道具打字稿

这是传递接口的正确方法吗? 如果没有,请指导我。 谢谢! 这是我的界面 这是我想知道这是好还是不好的部分 这是工作的方式,我只是想澄清这是否好,如果不是,请帮助我,谢谢!
1回复

反应原生中的多个道具

我想要它,以便在我 console.log 时,它会返回一些非未定义的东西。 如果我将 userContent 首先放在 props 中,它可以正常工作,但是 FunctionComponenet 中的所有内容都不起作用。 有任何想法吗? 我尝试了很多不同的方法,但无法弄清楚。
2回复

将本机视图样式道具反应为内联道具

这不是错误。 只是为了确保 View 样式道具对象也支持作为内联道具吗? 示例(经典方式,也用 React Native Doc 编写) 上面的例子没有任何问题,可以正常工作。 但是,我尝试构建受 React Material UI的 Box 组件启发的样式框组件,我发现还有另一种简单的方法,