React Native Firebase Firestore文档新增多个map对象字段的实现问题问询

直接按照以下步骤修改代码即可实现动态队友输入+符合要求的Firestore数据结构： #

1. 调整状态定义 #

把注释的teammates状态改成数组类型，用来存储所有动态添加的队友信息：

const [teammates, setTeammate] = useState([{ name: '', title: '' }]); // 默认预留1个队友输入位

2. 新增工具函数 #

分别用来添加新的队友输入项、更新指定队友的输入内容：

// 新增空的队友输入项
const addTeammateInput = () => {
  setTeammates([...teammates, { name: '', title: '' }]);
};

// 更新指定索引的队友字段内容
const handleTeammateChange = (index, field, value) => {
  const updatedTeammates = [...teammates];
  updatedTeammates[index][field] = value;
  setTeammates(updatedTeammates);
};

3. 修改提交数据逻辑 #

把队友数组转成你需要的Teammate1/Teammate2格式的嵌套map，同时自动过滤无效空数据：

const savePostData = () => {
  // 数组转目标map结构
  const teammatesMap = {};
  teammates.forEach((item, index) => {
    // 跳过姓名、职位都为空的无效队友数据
    if (item.name.trim() || item.title.trim()) {
      teammatesMap[`Teammate${index + 1}`] = {
        name: item.name,
        title: item.title
      };
    }
  });

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

4. 补充UI动态输入渲染 #

在原有3个输入框下方、提交按钮上方，添加队友输入区域和新增按钮：

{/* 动态队友输入区域 */}
{teammates.map((item, index) => (
  <View key={index} style={{marginTop: 12}}>
    <TextInput 
      placeholder = {`队友${index+1}姓名`}
      value={item.name}
      onChangeText = {(val) => handleTeammateChange(index, 'name', val) }
    />
    <TextInput 
      placeholder = {`队友${index+1}职位`}
      value={item.title}
      onChangeText = {(val) => handleTeammateChange(index, 'title', val) }
    />
  </View>
))}

<Button title="添加新队友" onPress={addTeammateInput} />

修改后完整代码 #

import React, {useState} from 'react';
import { View, Image, TextInput, Button } 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 [teammates, setTeammates] = useState([{ name: '', title: '' }]);

  // 添加新的空队友输入项
  const addTeammateInput = () => {
    setTeammates([...teammates, { name: '', title: '' }]);
  };

  // 更新指定索引的队友字段内容
  const handleTeammateChange = (index, field, value) => {
    const updatedTeammates = [...teammates];
    updatedTeammates[index][field] = value;
    setTeammates(updatedTeammates);
  };

  const savePostData = () => {
    // 数组转目标map结构
    const teammatesMap = {};
    teammates.forEach((item, index) => {
      // 过滤掉姓名职位都为空的无效队友数据
      if (item.name.trim() || item.title.trim()) {
        teammatesMap[`Teammate${index + 1}`] = {
          name: item.name,
          title: item.title
        };
      }
    });

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

  return (
    <View style={{flex:1, padding: 16}}>
      <TextInput 
        placeholder = "Age"
        onChangeText = {(age) => setAge(age) }
      />
      <TextInput 
        placeholder = "Name"
        onChangeText = {(name) => setName(name) }
      />
      <TextInput 
        placeholder = "Title"
        onChangeText = {(title) => setTitle(title) }
      />
      
      {/* 动态队友输入区域 */}
      {teammates.map((item, index) => (
        <View key={index} style={{marginTop: 12}}>
          <TextInput 
            placeholder = {`队友${index+1}姓名`}
            value={item.name}
            onChangeText = {(val) => handleTeammateChange(index, 'name', val) }
          />
          <TextInput 
            placeholder = {`队友${index+1}职位`}
            value={item.title}
            onChangeText = {(val) => handleTeammateChange(index, 'title', val) }
          />
        </View>
      ))}

      <Button title="添加新队友" onPress={addTeammateInput} />
      <Button title="Post" onPress = {() => savePostData()} />
    </View>
  )
}

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