为不同的输入反应原生动态输入形式相同的值

Question

我刚刚开始使用 React Native 学习 JS，我想使用 firebase firestore 构建一个应用程序。

但是我遇到了一个问题——当用户想要上传帖子时，他应该能够上传他的名字、他的头衔、他的年龄和他的队友（他的队友应该是嵌套对象并且应该有：姓名、 Title, Age) - 用户应该能够为每个新队友添加动态输入字段，这些字段应该将数据添加到 firestore（每个队友应该包含在索引从 0 开始的对象/地图中，并且在里面他们应该为每个队友输入姓名、职位和年龄）。

我设法解决了所有这些问题，除了一个。我找到了如何从一些 tuts 在线添加动态输入并设法将其连接到 firebase。但只有一个属性（比如名称）而不是其他属性。

当我尝试为用户添加不同的输入（每个新队友的头衔/年龄）时，他们会自动完成第一个输入的信息。我知道这对我来说是一个错误，因为我并不真正了解这些功能是如何工作的，以及由于我的专业知识水平较低，如何使它们适应我的需求。

如果你能帮忙就好了。谢谢。

*附件是来自用户界面的图像，简单的（只有姓名，已经可以使用）和我想要工作的图像，还附上了仅姓名队友字段的代码和我创建的那个对于不同的输入（请记住，我知道这是完全错误的）。

图片： user ui with only teammates name-working

user ui with teammates name, title and age - title and age input are name - not working properly

import React, {useEffect, useState} from 'react';
import { View, Text, Button, TextInput, TouchableOpacity, StyleSheet, ScrollView } 
from 'react-native'
import firebase from 'firebase';
import { user } from '../../redux/reducers/user';

require("firebase/firestore") ;
require("firebase/firebase-storage") ;

export default function Save(props, {navigation}) {
const [age, setAge] = useState("");
const [name, setName] = useState("");
const [title, setTitle] = useState("");   
const [teammateName, setTeammateName] = useState([{key: '', name: ''}]);


const savePostData = () => {
    firebase.firestore()
    .collection('posts')
    .doc(firebase.auth().currentUser.uid)
    .collection("userPosts")
    .add({
    
       
        teammateName,
        age,
        name,
        title,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
    }).then((function () {
        props.navigation.popToTop()
    }))
  }


const addHandler = ()=>{
  const _teammateName = [...teammateName];
  _teammateName.push({key: '', name: ''});
  setTeammateName(_teammateName);
}

const deleteHandler = (key)=>{
  const _teammateName = teammateName.filter((input,index) => index != key);
  setTeammateName(_teammateName);
}

const inputHandler = (text, key)=>{
  const _teammateName = [...teammateName];
  _teammateName[key].name = text;
  _teammateName[key].key   = key;
  setTeammateName(_teammateName);

 }

return (
  <View style={styles.container}>
   <TextInput 
        placeholder = "Age"
        onChangeText = {(age) => setAge(age) }
        />
        <TextInput 
        placeholder = "Name"
        onChangeText = {(name) => setName(name) }
        />
        <TextInput 
        placeholder = "Title"
        onChangeText = {(title) => setTitle(title) }
        />
   
   
    <ScrollView style={styles.inputsContainer}>
    {teammateName.map((input, key)=>(
      <View style={styles.inputContainer}>
       <TextInput placeholder={"Enter Teammate Name"} value={input.name}  onChangeText={(text)=>inputHandler(text,key)}/>
      
        <TouchableOpacity onPress = {()=> deleteHandler(key)}>
          <Text style={{color: "red", fontSize: 13}}>Delete</Text>
        </TouchableOpacity> 
      </View>
    ))}
    </ScrollView>
    <Button title="Add" onPress={addHandler} />
    <Button title="Post" onPress = {() => savePostData()} />
  </View>
);
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  padding: 20,
  backgroundColor: 'white'
 },
 inputsContainer: {
  flex: 1, marginBottom: 20
 },
 inputContainer: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  borderBottomWidth: 1,
  borderBottomColor: "lightgray"
 }
})

这里是用于队友（姓名、职位、年龄）的多个输入的代码，这些输入不起作用且不知道如何使其起作用。

 import React, {useEffect, useState} from 'react';
 import { View, Text, Button, TextInput, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'
 import firebase from 'firebase';
 import { user } from '../../redux/reducers/user';

 require("firebase/firestore") ;
 require("firebase/firebase-storage") ;

  export default function Save(props, {navigation}) {
  const [age, setAge] = useState("");
  const [name, setName] = useState("");
  const [title, setTitle] = useState("");   
  const [teammateName, setTeammateName] = useState([{key: '', name: '', title: '', age: ''}]);


   const savePostData = () => {
    firebase.firestore()
    .collection('posts')
    .doc(firebase.auth().currentUser.uid)
    .collection("userPosts")
    .add({
    
       
        teammateName,
        age,
        name,
        title,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
    }).then((function () {
        props.navigation.popToTop()
    }))
   }


  const addHandler = ()=>{
   const _teammateName = [...teammateName];
   _teammateName.push({key: '', name: '', title:'', age:''});
   setTeammateName(_teammateName);
  }

  const deleteHandler = (key)=>{
    const _teammateName = teammateName.filter((input,index) => index != key);
    setTeammateName(_teammateName);
  }

  const inputHandler = (text, key)=>{
   const _teammateName = [...teammateName];
     _teammateName[key].name = text;
     _teammateName[key].title = text;
     _teammateName[key].age = text;
     _teammateName[key].key   = key;
   setTeammateName(_teammateName);

  }

  return (
   <View style={styles.container}>
    <TextInput 
        placeholder = "Age"
        onChangeText = {(age) => setAge(age) }
        />
        <TextInput 
        placeholder = "Name"
        onChangeText = {(name) => setName(name) }
        />
        <TextInput 
        placeholder = "Title"
        onChangeText = {(title) => setTitle(title) }
        />
   
   
    <ScrollView style={styles.inputsContainer}>
    {teammateName.map((input, key)=>(
      <View style={styles.inputContainer}>
       <TextInput placeholder={"Enter Teammate Name"} value={input.name}  onChangeText={(text)=>inputHandler(text,key)}/>
       <TextInput placeholder={"Enter Teammate Title"} value={input.title}  onChangeText={(text)=>inputHandler(text,key)}/>
       <TextInput placeholder={"Enter Teammate Age"} value={input.age}  onChangeText={(text)=>inputHandler(text,key)}/>
        <TouchableOpacity onPress = {()=> deleteHandler(key)}>
          <Text style={{color: "red", fontSize: 13}}>Delete</Text>
        </TouchableOpacity> 
      </View>
    ))}
    </ScrollView>
    <Button title="Add" onPress={addHandler} />
    <Button title="Post" onPress = {() => savePostData()} />
   </View>
  );
 }

 const styles = StyleSheet.create({
 container: {
  flex: 1,
  padding: 20,
  backgroundColor: 'white'
},
inputsContainer: {
  flex: 1, marginBottom: 20
},
inputContainer: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  borderBottomWidth: 1,
  borderBottomColor: "lightgray"
}
})