当有人发送时，我的平面列表没有显示新消息。反应本机

Question

当我收到来自另一个人的短信时，我必须向上滚动一点才能显示新消息。当我发送消息时，它的工作方式不同，它只是在没有滚动的情况下显示

RN 0.59，信号R

我如何收到消息

 componentDidMount() {
    this._isMounted = true;

    this.refreshDataFromServer();

    hub.on("message", (id, name, msg, img, uId) => {
        if (this._isMounted) {
            if (id !== null) {
                //let mess = '{"Name":"' + name + '","Message":"' + msg + '","Image":"' + img + '"}';
                let mess = '{"Id":"' + id + '","Name":"' + name + '","Message":"' + msg + '"}';

                var obj = JSON.parse(mess.toString());
                this.state.data.push(obj);

               
            }
        }
    });
    hub.on("Loading", () => { }
    );
    hub.on("doneLoad", () => { }
    );
}

我的平面列表

render() {
        return (
            <View style={styles.container}>
                 <FlatList
                    data={this.state.data}
                    removeClippedSubviews={false} 
                    extraData={this.state.data}
                    ref={(ref) => { this.flatListRef = ref; }}
                    onContentSizeChange={()=> this.flatListRef.scrollToEnd()}
                    renderItem={({ item, index }) => {
                        return (
                            <FlatListItem item={item} index={index} navigation={this.props.navigation}>

                            </FlatListItem>);
                    }}
                    keyExtractor={(item, index) => String(index)}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh}
                        />}
                />
                <View style={styles.footer}>
                    <View style={styles.inputContainer}>
                        <TextInput style={styles.inputs}
                            multiline = {true}
                            ref={input => { this.textInput = input }}
                            placeholder="Write a message..."
                            underlineColorAndroid='transparent'
                            onChangeText={(text) => this.updateValue(text, 'sendMessage')}>
                        </TextInput>    
                    </View>

                    <TouchableOpacity style={styles.btnSend}
                        onPress={this.sendMessage}>
                        <Image source={{ uri: "https://png.icons8.com/small/75/ffffff/filled-sent.png" }} style={styles.iconSend} />
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

我是 RN 的新手，所以我真的不知道 RN 中的生命周期是如何工作的。谢谢

Answer 1

您不应该直接将值设置为状态 this.state.data.push(obj)

不会触发render.Instead，需要使用setState

this.setState({
     data: this.state.data.concat(obj)
})

当有人发送时，我的平面列表没有显示新消息。反应本机

My flatlist doesn't show up the new message when someone was send. React-Native

signalr

react-native