如何在React Native的大状态对象中存储Firebase返回的valuesArray

背景信息 #

从Firebase集合获取到的数据结构如下：

{
  "data": {
    "valuesArray": [
      "MCU",
      "Anime",
      "Shopping",
      "Travelling",
      "Cooking",
    ],
  },
}

React中定义了一个用于存储各类数据集合的大状态对象：

const [data, setData] = useState<any>({});

需求：将嵌套层级中的valuesArray提取出来，存入上述状态对象，同时保留后续存入其他数据集合的扩展性。

解决方案 #

直接通过链式访问提取目标数组，再利用React状态的函数式更新合并原有数据，避免覆盖已存内容：

基础实现示例

// 异步获取Firebase数据的函数
const fetchFirebaseData = async () => {
  // 替换为你的Firebase查询逻辑
  const firebaseResponse = await getFirebaseCollectionData();
  
  // 从嵌套结构中提取valuesArray
  const targetArray = firebaseResponse.data.valuesArray;
  
  // 更新状态：合并原有数据，添加valuesArray字段
  setData(prevState => ({
    ...prevState,
    valuesArray: targetArray
  }));
};

扩展：自定义集合键名

如果需要根据集合名称给数组设置更语义化的键（比如区分不同数据集合），可以使用计算属性名：

const fetchFirebaseData = async () => {
  const firebaseResponse = await getFirebaseCollectionData();
  const targetArray = firebaseResponse.data.valuesArray;
  // 自定义键名，比如对应集合名称"hobbies"
  const collectionKey = "hobbies";
  
  setData(prevState => ({
    ...prevState,
    [collectionKey]: targetArray
  }));
};

关键说明 #

1. 链式访问提取数据：通过firebaseResponse.data.valuesArray直接穿透嵌套层级，快速获取目标数组，无需额外处理复杂结构。
2. 函数式更新状态：使用setData(prevState => {...})确保基于最新的状态进行合并，避免因异步更新导致的状态覆盖问题，同时方便后续添加新的数据集合字段。

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