如何在react native中将所有表单数据一次上载到firebase？

发送表单数据时遇到的错误警告：无法对未安装的组件执行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>
    )
  }
}

导出默认类add.Component{
陈述={
Courier_trackerId:“”，
快递员/托运人姓名：“，
信使电话号码：“，
信使地址：“
}
InputExtField=（道具）=>{
返回(
{props.title}
{this.setState（{'props.var'：text}）
}
/>
);
}
addNewShipment=async（）=>{
firestore（）.集合（“信使”）.添加({
TrackerId:this.state.Courier\u TrackerId，
ShipperName:this.state.Courier\u ShipperName，
PhoneNum:this.state.Courier\u PhoneNum，
地址：this.state.Courier\u地址
})
}
render（）
{
返回(
添加新装运
填写细节
添加装运
)
}
}

---

如果有任何方法可以修改此现有功能，这将比在多个屏幕上使用

InputTextField

创建一个完整的新功能要好得多。

问题：无法对未安装的组件执行反应状态更新，
您可以创建一个类似于

updateMyState=（state）=>{}

的函数，该函数根据特定的检查将state进一步设置为updatestate。
只有在安装组件时才会更新，如果卸载组件，则不会更新状态

---

另外，我认为这个问题与firebase无关。

我认为，一旦您修复了代码中的一些错误，这个问题可能会得到解决

请看以下几行：

addNewShipment=async（）=>{
firestore（）.集合（“信使”）.添加({
TrackerId:this.state.Courier\u TrackerId，
ShipperName:this.state.Courier\u ShipperName，
PhoneNum:this.state.Courier\u PhoneNum，
地址：this.state.Courier\u地址
})
}

在这里，您打算执行一些需要一些时间才能解决的异步工作，但是，这里的add操作是“浮动的”。它不与

wait

一起使用，也不会作为函数的结果返回。这将导致

addNewShipment

启动“将数据添加到数据库”调用，但不等待其结果。仅向函数定义中添加

async

是不够的

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

addNewShipment=async（）=>{
// ⮟ 将从add（）返回承诺
return firestore（）.集合（“信使”）.添加({
TrackerId:this.state.Courier\u TrackerId，
ShipperName:this.state.Courier\u ShipperName，
PhoneNum:this.state.Courier\u PhoneNum，
地址：this.state.Courier\u地址
})
}
//addNewShipment是一个（）=>承诺

或

addNewShipment=async（）=>{
等待firestore（）.集合（“信使”）。添加({
TrackerId:this.state.Courier\u TrackerId，
ShipperName:this.state.Courier\u ShipperName，
PhoneNum:this.state.Courier\u PhoneNum，
地址：this.state.Courier\u地址
})
}
//addNewShipment是一个（）=>承诺

您可以使用

return await firestore（）.coll…

，但在这种情况下效率很低

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

返回(
{props.title}
{this.setState（{'props.var'：text}）
}
/>
);

在这里，您试图基于

props.var

的值分配给状态，例如

this.setState（{Courier\u PhoneNum:text}）

，但是，文本

props.var

没有得到计算，而是设置

this.state['props.var']=text

，而不是

this.state.Courier\u PhoneNum=text

可通过在对象指定中使用方括号更正此问题：

如果没有设置“道具，var”，请考虑抛出一个错误。 返回( {props.title} {this.setState（{[props.var]：text}） } /> );

---

非常感谢，效果非常好。