React Native+Redux+Firebase：点击发送按钮无法提交文本至Firebase

嘿，我仔细看了你的代码，发现几个关键问题导致onSendBtnPressed无法正常工作，咱们一步步来修复：

1. 错误调用Redux Action Creator #

你的sendMessage是Redux thunk action creator，不能直接调用它——因为你已经通过connect把它映射到组件props里了，必须通过this.props.sendMessage来触发。而且你调用时没传必要的文本参数，还把后续清空输入框的代码写在了return之后，这些代码根本不会执行。

错误代码： #

onSendBtnPressed (text) {
  return sendMessage(text, this.props.user)
  this.textInput.clear();
  Keyboard.dismiss();
}

修复后： #

onSendBtnPressed = () => {
  // 从组件state里拿到输入的文本
  const { text } = this.state;
  // 空文本直接返回，避免发送空消息
  if (!text.trim()) return;

  // 调用props里的sendMessage（由connect映射而来）
  this.props.sendMessage(text, this.props.user);

  // 清空输入框、关闭键盘，同时重置state里的文本
  this.textInput.clear();
  Keyboard.dismiss();
  this.setState({ text: '' });
};

2. 修复方法调用的参数问题 #

你的TouchableOpacity的onPress是() => this.onSendBtnPressed()，但原方法定义里写了(text)参数——这里根本没传值，导致text是undefined，自然没法发送消息。直接从组件state取文本就好，因为你已经通过onChangeText把输入值存在state里了。

3. 简化TextInput的onChangeText绑定 #

你的TextInput里的onChangeText写法有点冗余，没必要多传一个'text'参数：

原代码： #

onChangeText={(text) => this.onChangeText(text, 'text')}

简化后： #

onChangeText={(text) => this.onChangeText(text)}

对应的组件方法保持简洁：

onChangeText = (text) => {
  this.setState({ text: text });
};

4. 确保this的上下文正确（可选但推荐） #

为了避免this指向混乱，建议用箭头函数定义方法（或者在构造函数里绑定上下文），这样就不用手动处理this的问题了。比如上面的onSendBtnPressed和onChangeText我都用了箭头函数定义。

5. 补充Actions代码的不完整部分 #

你的Actions代码最后有个未完成的setUserName方法，得把它补全，避免影响Redux的正常工作：

export const setUserName = (name) => {
  return (dispatch) => {
    // 补充你的业务逻辑，比如更新用户信息到Firebase或Redux state
  };
};

最后检查按钮的UI #

你的TouchableOpacity里没有添加显示文字的组件，用户看不到"发送"按钮的提示，建议加上：

<TouchableOpacity 
  onPress={() => this.onSendBtnPressed()} 
  style={{marginLeft:280, backgroundColor:'gray', width: 70, height: 30, borderRadius: 4}}
>
  <Text style={{color: 'white', textAlign: 'center', lineHeight: 30}}>Send</Text>
</TouchableOpacity>

这样修改后，点击按钮就能正确获取输入文本、调用Redux action发送到Firebase，同时更新消息列表了。

内容的提问来源于stack exchange，提问作者Furkan Ceylan