react原生实时聊天

Question

我对这些堆栈是新手，所以无法识别组件的正确功能。

下面是我的主要客户端组件的代码：

    constructor(props) {
      super(props);
          this.state = {
          text: '',
          messages : [],
       }
    }
    componentDidMount() {
        this.socket = io('http://localhost:3333');
        this.socket.on('RECEIVE_MSG', (msg) => this.addMessage(msg))
    }
    sendMessage = () => {
        this.socket.emit('EMIT_MSG', {
            text: this.state.text
        });

        this.setState({text: ''})
    }

    addMessage = (msg) => {
        console.log(msg, 'any incoming msgs data');
        this.setState({messages : [...this.state.messages, msg]});
        console.log(this.state.messages);
    }

    renderMessages = () => {
        return this.state.messages.map((message, index) => {
            return (
                <Text key={index}>
                    {message}
                </Text>
            )
        })
    }

  render() {
    return (
      <View>
        <TextInput    placeholder="enter your msg"
          onChangeText={(text)=>this.setState({text})}/>

          <TouchableOpacity onPress={() => this.sendMessage}>
            <Text> send msg </Text>
           </TouchableOpacity>

            <ScrollView>
                {this.renderMessages()}
            </ScrollView>
      </View>
    )
  }
}

下面是我使用express和server imported时的服务器代码：

 io.on('connection', function(socket) {
    console.log('a user connected: ' +   socket.id);


    socket.on('RECEIVE_MSG', function(msg){
        console.log('message: ' + msg);

        io.emit('EMIT_MSG', msg);

    });
});

问题仍然存在，控制台中没有显示任何内容。每当我按下发送按钮时，文本甚至不会改变，也不会在控制台中显示任何错误消息。如果我遵循了正确的约定，请帮我解决这个问题？

Answer 1

你的问题在

<TouchableOpacity onPress={() => this.sendMessage}>

那里的箭头函数不调用this.sendMessage。将代码更改为

<TouchableOpacity onPress={this.sendMessage}>

你应该会看到一个结果。

您也错误地使用了Scroll视图，它不仅仅是一个父视图。为了呈现项目，您必须设置正确的props。这包括renderItem prop和keyExtractor函数，前者需要一个函数来显示数据，后者需要一个函数来提供不可见的键值来进行反应，以确保呈现的项目是唯一的。