React Native中如何正确提取Firestore的areas数组元素

你当前的代码存在两个关键问题：

1. 直接修改React State：useState返回的状态变量不可直接修改，直接调用documents.push()不会触发组件重渲染，也不符合React状态管理规范。
2. 数组嵌套问题：value.data().areas本身就是包含14个元素的数组，使用push()会把这个完整数组作为单个元素添加到documents中，导致documents变成嵌套数组（结构类似[[元素1, 元素2, ..., 元素14]]）。

正确代码实现 #

const [documents, setDocuments] = useState([]);

const retrieveAreas = async () => {
  try {
    // 直接await获取文档，避免混用async/await与then
    const docSnapshot = await firebase.firestore().collection('Operation').doc(currentid).get();
    
    if (docSnapshot.exists) {
      const areas = docSnapshot.data().areas;
      
      // 情况1：将documents直接替换为Firestore返回的areas数组（最终documents是14个元素的数组）
      setDocuments(areas);
      
      // 情况2：如果需要把areas的元素追加到现有documents数组后面
      // setDocuments(prevDocuments => [...prevDocuments, ...areas]);
    } else {
      console.log('目标文档不存在');
    }
  } catch (e) {
    alert(e);
  }
};

关键说明 #

• 使用setDocuments（useState返回的状态更新函数）修改状态，确保组件能感知状态变化并触发重渲染。
• 用扩展运算符...展开areas数组的元素，避免嵌套：如果是替换状态，直接赋值areas即可；如果是追加，就用[...prevDocuments, ...areas]把areas的每个元素单独添加到数组中。
• 统一使用async/await风格处理异步操作，比混用then更简洁易读。

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