ReferenceError：当我尝试在 React Native 中显示来自 FireStore 的数组时，找不到变量：yourOrders答案

【问题标题】：ReferenceError: Can't find variable: yourOrders when I try display an array from FireStore in React NativeReferenceError：当我尝试在 React Native 中显示来自 FireStore 的数组时，找不到变量：yourOrders
【发布时间】：2021-02-28 16:59:39
【问题描述】：

我有一个以 JSON 格式推送到 firestore 的数组，当我收到它时，我将它转换为字符串并在控制台上打印它给了我这个输出

["[{\"image\":\"https://static.producer.com/wp-content/uploads/2020/04/02170807/07-3-col-beans-GettyImages-157280488.jpg\",\"name\":\"Beans\",\"price\":45,\"quantityToOrder\":1,\"id\":1,\"total\":45},{\"res\":\"45\"}]"]

但是当我尝试使用此代码显示时，它给了我这个错误

firestore()
.collection('vegezoneData')
.doc(auth().currentUser.uid)
.get()
.then((documentSnapshot) => {
  if (documentSnapshot.exists) {
    var yourOrders = documentSnapshot.data().MyOrders; 
    JSON.stringify(yourOrders);
    console.log(yourOrders);
  }
});
return (
<View> 
  <Text>{yourOrders}</Text>
  <View style={styles.tableProducts}>
    <Text style={styles.productColumn}>{yourOrders}</Text> 
  </View>

这是我的错误

ReferenceError: Can't find variabl`enter code here`e: yourOrders

我真的希望你能帮助我我已经尝试了很多选择，但没有一个适合我。

【问题讨论】：

标签： firebase react-native google-cloud-firestore

【解决方案1】：

这里的问题是您在 documentSnapshot 回调中声明了 yourOrders。在 JSX {yourOrders} 中找不到。问题出在 JSX 中：

documentSnapshot.data().MyOrders;

你在回调中创建它，它会在一段时间后调用，但在初始渲染中，它不会被声明。

 var yourOrders = documentSnapshot.data().MyOrders;

如果您使用钩子，请尝试使用 useState 创建一个变量。像这样：

const [yourOrders, setYourOrders] = useState(null);

并在快照回调中设置：

setYourOrders(documentSnapshot.data().MyOrders);

【讨论】：

【解决方案2】：

您正在组件中执行异步操作。这意味着在正确获取 then() 部分之前，您的数据将不会立即可用。你应该做两件事：

您的变量yourOrders 应该由状态管理。您可以使用状态挂钩轻松完成此操作。您只需要一个 setter 函数 setYourOrders，它会在获取数据后填充您的 yourOrders 变量。
您必须检查您的return 语句以查看yourOrders 是否有一些数据。如果没有，您应该包含某种指示符，表明数据仍在获取中。

我假设您在这种情况下使用的是功能组件。您可以像这样编写以下组件：


const Component = () => {
    const [yourOrders, setYourOrders] = useState([]);
    firestore()
    .collection('vegezoneData')
    .doc(auth().currentUser.uid)
    .get()
    .then((documentSnapshot) => {
      if (documentSnapshot.exists) {
        var yourOrders = documentSnapshot.data().MyOrders; 
        JSON.stringify(yourOrders);
        setYourOrders(yourOrders);
        console.log(yourOrders);
      }
    });
    return (yourOrders && yourOrders.length > 0 ?
    <View> 
      <Text>{yourOrders}</Text>
      <View style={styles.tableProducts}>
        <Text style={styles.productColumn}>{yourOrders}</Text> 
      </View>
    </View>
      : 
    <View>
       <Text>Loading...</Text>
    </View>
      );
}

【讨论】：