如何在 react-native 中一次将所有表单数据上传到 firebase？答案

【问题标题】：How can I upload all the form data at once to firebase in react-native?如何在 react-native 中一次将所有表单数据上传到 firebase？
【发布时间】：2021-05-04 14:26:36
【问题描述】：

我在发送表单数据时遇到的错误警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。

export default class AddShipment extends React.Component{
  state={
    Courier_trackerId: "",
    Courier_ShipperName: "",
    Courier_PhoneNum: "",
    Courier_Address: ""
  }
  InputTextField=(props)=> {
    return (
        <View style={props.style}>
            <Text style={styles.inputTitle}>{props.title}</Text>
            <TextInput
                placeholder={props.placeholderText}
                secureTextEntry={props.isSecure}
                style={styles.input}
                onChangeText={
                  text=>{this.setState({ 'props.var' : text })}
                }
            />
            <View style={{ borderBottomColor: "#D8D8D8", borderBottomWidth: 1 }} />
        </View>
    );
  }

  addNewShipment= async()=>{
    firestore().collection("Couriers").add({
      TrackerId : this.state.Courier_trackerId,
      ShipperName : this.state.Courier_ShipperName,
      PhoneNum : this.state.Courier_PhoneNum,
      Address : this.state.Courier_Address
    })
  }
  render()
  {
    return(
      <ScrollView style={{backgroundColor:"#FFF", height: "100%", flex: 1, paddingHorizontal: 30}}>
        <Text style={[styles.text, { marginTop: 10, fontSize: 22, fontWeight: "500", alignSelf:'center' }]}>Add New Shipment</Text>
        <Text style={[styles.text, { color: "#ABB4BD", fontSize: 15, textAlign: "center", marginVertical: 20 }]}>Fill in the details </Text>
        <this.InputTextField 
        style={{marginTop: 25, marginBottom: 8}}
        title="Tracking-ID"
        var="Courier_trackerId" />
        <this.InputTextField 
        style={{marginTop: 25, marginBottom: 8}}
        title="Shipper Name"
        var="Courier_ShipperName" />
        <this.InputTextField 
        style={{marginTop: 25, marginBottom: 8}}
        title="Phone Number"
        var="Courier_PhoneNum" />
        <this.InputTextField 
        style={{marginTop: 25, marginBottom: 8}}
        title="Address"
        var="Courier_Address" />
        <TouchableOpacity style={styles.submitContainer} onPress={this.addNewShipment}>
                        <Text
                            style={[
                                styles.text,
                                {
                                    color: "#FFF",
                                    fontWeight: "600",
                                    fontSize: 16
                                }
                            ]}
                        >
                            Add Shipment
                        </Text>
        </TouchableOpacity>

      </ScrollView>
    )
  }
}

如果有任何方法可以修改这个现有功能，那将比创建一个全新的功能要好得多，因为我在多个屏幕上使用InputTextField。

【问题讨论】：

标签： firebase react-native google-cloud-firestore

【解决方案1】：

我认为一旦您修复了代码中的一些拼写错误，这可能会解决。

看看这些行：

addNewShipment= async()=>{
  firestore().collection("Couriers").add({
    TrackerId : this.state.Courier_trackerId,
    ShipperName : this.state.Courier_ShipperName,
    PhoneNum : this.state.Courier_PhoneNum,
    Address : this.state.Courier_Address
  })
}

在这里，您打算做一些需要一些时间来解决的异步工作，但是，您在这里的添加操作是“浮动的”。它不与await 一起使用，也不作为函数的结果返回。这导致addNewShipment 开始将数据添加到数据库调用，但不等待它的结果。将async 单独添加到函数定义中是不够的。

要更正此问题，您可以执行以下任一操作：

addNewShipment = async () => {
  // ⮟ will return the Promise<DocumentReference> from add()
  return firestore().collection("Couriers").add({
    TrackerId : this.state.Courier_trackerId,
    ShipperName : this.state.Courier_ShipperName,
    PhoneNum : this.state.Courier_PhoneNum,
    Address : this.state.Courier_Address
  })
}

// addNewShipment is a () => Promise<DocumentReference>

或

addNewShipment = async () => {
  await firestore().collection("Couriers").add({
    TrackerId : this.state.Courier_trackerId,
    ShipperName : this.state.Courier_ShipperName,
    PhoneNum : this.state.Courier_PhoneNum,
    Address : this.state.Courier_Address
  })
}

// addNewShipment is a () => Promise<void>

您可以使用return await firestore().coll...，但在这种情况下效率很低。

接下来，我们需要看看这些行：

return (
    <View style={props.style}>
        <Text style={styles.inputTitle}>{props.title}</Text>
        <TextInput
            placeholder={props.placeholderText}
            secureTextEntry={props.isSecure}
            style={styles.input}
            onChangeText={
              text=>{this.setState({ 'props.var' : text })}
            }
        />
        <View style={{ borderBottomColor: "#D8D8D8", borderBottomWidth: 1 }} />
    </View>
);

在这里，您尝试根据props.var 的值分配状态，例如this.setState({ Courier_PhoneNum: text })，但是文本props.var 没有得到评估，而是设置this.state['props.var'] = text 而不是this.state.Courier_PhoneNum = text .

这通过在对象分配中使用方括号来纠正：

// consider throwing an error if `props.var` is not set.
return (
    <View style={props.style}>
        <Text style={styles.inputTitle}>{props.title}</Text>
        <TextInput
            placeholder={props.placeholderText}
            secureTextEntry={props.isSecure}
            style={styles.input}
            onChangeText={
              text=>{this.setState({ [props.var] : text })}
            }
        />
        <View style={{ borderBottomColor: "#D8D8D8", borderBottomWidth: 1 }} />
    </View>
);

【讨论】：

【解决方案2】：

问题：无法对未安装的组件执行 React 状态更新，
您可以创建一个类似 updateMyState=(state)=>{} 的函数，该函数会根据特定检查进一步 setState 来更新状态。
仅当组件已挂载时才会更新，如果组件 unMount 则不会更新状态。

附：我认为这个问题与 firebase 无关。

【讨论】：