Question

我已成功连接套接字，并且套接字连接也获得了正确的响应。状态正在成功更新，但是问题是屏幕上的数据没有更新（renderTabSection无法呈现更新的数据）。

class Test extends Component{
    constructor (props) {
        super(props);
        this.animatedValue = new Animated.Value(0);
    }
    componentDidMount(){
        const { restaurantId } = this.props;
        this.socket = new WebSocket('wss://test.com/' + id);
        this.socket.onopen = (data) =>{
            console.log('Socket connected');
        }
        this.socket.onmessage = (e) => {
            this.props.socketData(e.data);
            //this.socketUpdate();
        };
        this.socket.onclose = () => {
            this.socket = new WebSocket('wss://test.com/' + id);
        }
    }
    componentWillMount(){
        this.props.resetVenueDetails();
        this.props.showLoader();
    }

    componentWillReceiveProps(nextProps){
        this.renderTabSection();
    }

    componentWillUnmount() {
        this.socket.close();
    }

    onTabClick(tabId){
        this.props.onTabChange(tabId);
    }

    renderTabSection(){
        let playlist = this.props.playlists;
        const { 
            container, 
            tabHeaderStyle, 
            tabHeadStyle, 
            tabDetailBox, 
            albumTextStyle, 
            selectedTabStyle,
            hideTabContentStyle
        } = styles;
        return (
            <View style={{flex:1, borderBottomColor: '#000', borderBottomWidth: 2 }}>
                <View style={{flex:0,flexDirection:'row'}}>
                    <View style={tabHeadStyle}>
                        <TouchableOpacity onPress={this.onTabClick.bind(this,1)}>
                            <Text style={ [tabHeaderStyle, this.props.tabSelected == 1 ? selectedTabStyle : '' ] }>
                                Playlist
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={[container, this.props.tabSelected == 1 ? "" : hideTabContentStyle]} >
                    <ScrollView horizontal={true}>
                        <View style={{ flex: 1,flexDirection: 'row' }}>  
                            { this.renderPlaylistAlbums('user', playlist) }
                        </View>
                    </ScrollView>
                </View>
            </View>
        );
    }

    renderPlaylistAlbums(type, playlist){
        let songsArray = [];

        const {  tabDetailBox, albumTextStyle } = styles;

        playlist = playlist.length > 0 ? playlist : PLAYLIST_SECTION;
        playlist.filter( (data, i) => {
            if( data.type == type ){
                if(data.songs.length > 0 ){
                    let image = data.songs[0] && data.songs[data.songs.length -1].imageUrl ?
                                { uri : data.songs[data.songs.length -1].imageUrl } : 
                                require('../assets/images/playlist.png'); 

                    let imageStyle = data.songs[0] && data.songs[data.songs.length -1].imageUrl ?
                                        { width: '70%',height:'60%', borderRadius: 10 } : 
                                        { width: '60%',height:'60%' };
                    songsArray.push(
                        <TouchableOpacity key={i}>
                            <View style={ tabDetailBox }>
                                <Image 
                                    source={ image } 
                                    style={ imageStyle } />
                                <Text style={ albumTextStyle }>{ data.name }</Text>
                            </View>
                        </TouchableOpacity>
                    );
                }
            }
        });
        return songsArray;
    }

    loadSpinner(){
        if( this.props.loading ){
            return ( <View style={{ flex:1, position:'absolute', width:'100%' }} ><Spinner /></View> );
        } 
    }
    render(){
        const { backgroundImage } = styles;
        return (
            <View style={{ flex: 1 }}>
                <ImageBackground source={APP_BACKGROUND_IMAGE.source} style={backgroundImage}>
                    { this.loadSpinner() }
                    <View style={{ flex:1, backgroundColor:'rgba(0,0,0,.7)' }}>
                        { this.renderTabSection() }
                    </View>
                </ImageBackground>
                <Footer headerText='Home' />
            </View>
        );
    }
}
const mapStateToProps = state => {
    return {
        error:state.home.error,
        loading:state.home.loading,
        tabSelected:state.restaurantDetail.tabSelected,
        playlists: state.restaurantDetail.playlists
    }
}
export default connect(mapStateToProps, { onTabChange, socketData, showLoader, resetVenueDetails })(Test)

我已成功连接套接字，并且套接字连接也获得了正确的响应。状态正在成功更新，但是问题是屏幕上的数据没有更新（renderTabSection无法呈现更新的数据）。

Answer 1

我认为您没有设置任何状态，因为setState会导致组件重新呈现，这就是setState的方式

constructor(props){
   this.state = {
    dataUpdated: false,
    anyUseFullVariable: '',
   }
}

当您从这样的套接字获得响应时，可以设置setState

this.setState({dataUpdated: true})

然后您可以像这样在渲染组件中使用状态

this.state.dataUpdated

这将重新渲染组件。这只是一个尝试做类似事情的例子。

更新

您还可以使用componentWillRecieveProps，只要道具发生更改，就会触发此回调函数

componentWillRecieveProps(nextProps){
  if(!isFetching && this.props.data !== nextProps.data) // or implement your preferred condition
    this.setState({UpdateList: this.props.data}) // this would call the render function
  }
}

反应本地套接字响应在视图中未更新

1 个答案: