Firebase实时数据库数据添加：Hook使用与代码修正求助

我帮你梳理下代码里的几个核心问题，然后给出完整的修正版本，一步步解释怎么解决~

代码里的关键错误 #

• 条件语句内定义函数违反React规则：React不允许在if/else这类条件块里定义组件内的函数，这会导致组件渲染逻辑不稳定，还会引发作用域问题。
• 错误使用setter函数而非状态变量：你在Firebase提交时写了setDesignationAS400.useState，这完全不对——应该直接用状态变量本身（比如DesignationAS400），setXXX是用来更新状态的函数，不是存储值的容器。
• TextInput的setter函数名不匹配：比如第一个输入框的onChangeText={text => setName(text)}，但你的状态更新函数是setDesignationAS400；同理setCode应该是setCodeCommun，setRefFourn应该是setRefFournisseur，这些名字全对应错了。
• 状态变量大小写不一致：你定义的状态是SelectedPoste（大写S），但后面判断和Picker里用的是selectedPoste（小写s），这会触发变量未定义的错误。
• 按钮点击事件函数名不匹配：按钮的onPress={add}，但你定义的函数是addPoste，名字对不上，点击会直接报错。

修正后的完整代码 #

import { useState } from 'react';
import { View, Text, TextInput, Picker, Button, StyleSheet } from 'react-native';
import firebase from './path-to-your-firebase-config'; // 确保引入正确的Firebase配置文件

export default function AddProduct(props) { 
  const [DesignationAS400, setDesignationAS400] = useState(''); 
  const [CodeCommun, setCodeCommun] = useState(''); 
  const [RefFournisseur, setRefFournisseur] = useState(''); 
  const [selectedPoste, setSelectedPoste] = useState("PostesMig"); // 统一小驼峰命名，避免大小写混淆

  // 把添加逻辑提取到条件外，根据selectedPoste动态选择数据库节点
  const addPoste = () => {
    // 可选：校验输入是否为空，避免无效数据提交
    if (!DesignationAS400 || !CodeCommun || !RefFournisseur) {
      alert('请填写所有必填字段');
      return;
    }

    // 根据选择的选项确定数据库节点路径
    const targetRef = selectedPoste === 'PostesMig' ? 'PostesMig' : 'PostesTig';
    
    firebase.database()
      .ref(targetRef)
      .push({
        DesignationAS400: DesignationAS400, // 直接使用状态变量的值
        CodeCommun: CodeCommun,
        RefFournisseur: RefFournisseur,
      })
      .then(() => {
        // 提交成功后清空输入框，给用户反馈
        setDesignationAS400('');
        setCodeCommun('');
        setRefFournisseur('');
        alert('产品添加成功！');
      })
      .catch(error => {
        alert(`添加失败：${error.message}`);
      });
  };

  return ( 
    <View style={styles.container}> 
      <View> 
        <Text style={styles.title}>Ajouter un produit</Text> 
      </View> 
      <TextInput 
        style={styles.textInput} 
        onChangeText={text => setDesignationAS400(text)} // 匹配正确的状态更新函数
        value={DesignationAS400} 
        placeholder='Designation AS 400' 
      /> 
      <TextInput 
        style={styles.textInput} 
        onChangeText={text => setCodeCommun(text)} // 修正setter名称
        value={CodeCommun} 
        placeholder='Code Commun' 
      /> 
      <TextInput 
        style={styles.textInput} 
        onChangeText={text => setRefFournisseur(text)} // 修正setter名称
        value={RefFournisseur} 
        placeholder='Ref Fournisseur' 
      /> 
      <Picker 
        style={styles.picker} 
        selectedValue={selectedPoste} // 匹配状态变量名
        onValueChange={(itemValue) => setSelectedPoste(itemValue)} 
      > 
        <Picker.Item label="Postes MIG" value="PostesMig" /> 
        <Picker.Item label="Postes TIG" value="PostesTig" /> 
      </Picker> 
      <View style={styles.button}> 
        <Button onPress={addPoste} title="Ajouter" /> // 匹配正确的函数名
      </View> 
    </View>
  );
}

// 补充样式定义（如果之前没有的话）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  textInput: {
    width: '100%',
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    paddingHorizontal: 10,
    marginBottom: 15,
  },
  picker: {
    width: '100%',
    height: 50,
    marginBottom: 20,
  },
  button: {
    width: '100%',
  },
});

关键修正点解释 #

1. 统一变量命名规范：把SelectedPoste改成selectedPoste，符合JavaScript小驼峰命名习惯，避免大小写混淆引发的错误。
2. 简化添加逻辑：将addPoste函数移到条件外，通过判断selectedPoste的值动态选择Firebase节点，既符合React规则，又简化了代码结构。
3. 正确提交状态值：提交到Firebase时直接使用状态变量（比如DesignationAS400），不再错误调用setXXX.useState。
4. 修复输入框绑定：每个输入框的onChangeText都对应正确的状态更新函数，确保输入值能正确存入状态。
5. 添加操作反馈：用then和catch处理Firebase的异步操作，成功后清空输入框，失败时提示错误信息，提升用户体验。
6. 可选的输入校验：提交前检查所有字段是否为空，避免向数据库存入无效数据。

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