0

我的代码中似乎有什么问题，我正在创建一个基于 firestore 和 firebase 的应用程序。 到目前为止一切正常，但现在我想添加一个从 1 开始的唯一键，然后按升序进入firebase 中的每个项目，通过它我可以检索我的FlatList 组件中的所有项目。 但我无法做到这一点。我目前面临的一个问题是，当用户填写表单并单击POST 按钮**[POST 按钮的详细信息如下]** 数据存储在 Firebase 中但计数器没有增加，之后 第二次尝试（意味着用户填写另一个表单并单击 POST 按钮）值最终增加。

表示在两个表单填写后，计数器递增一，但我想在每个填写的表单上递增计数器。

请帮我！

请参阅下面的代码

const [adTitle, setAdTitle] = useState('')
const [adDescription, setAdDescription] = useState('')
const [yearOfPurchase, setYearOfPurchase] = useState('')
const [price, setPrice] = useState('')
const [contactNo, setContactNo] = useState('')
const [image, setImage] = useState('')
const [counter, setCounter] = useState(0)

我在我的应用程序中使用这些股份，所有其他工作都很好，问题就出在这个问题上。

const [counter, setCounter] = useState(0)

并在用户按下发布按钮时调用此函数

const postData = async () => {
        if (!adTitle || !adDescription || !yearOfPurchase || !price || !contactNo) {
            Alert.alert("Please fill all the Fields")
            return
        }

        try {
            getCounter();                            // <-- called this function for Counter, Details are Below
            await fireStore().collection("ads").add({
                adTitle,
                adDescription,
                yearOfPurchase,
                price,
                contactNo,
                image,
                uniqueID: counter,
                uid: Auth().currentUser.uid
            })
            Alert.alert("Item Successfully Posted..")
            setAdTitle('')
            setAdDescription('')
            setYearOfPurchase('')
            setPrice('')
            setContactNo('')
            setImage('')
        } catch (err) {
            Alert.alert("Something went wrong\nPlease try again...")
        }

}

在调用getCounter();函数时，它从 firebase获取当前计数器值，然后将该值加一，然后更新 firebase 中的值

getCounter();函数 代码：（我认为问题就在这个 getCounter() 中，但我无法弄清楚。）

const getCounter = async () => {
        try {
            const querySnap = await fireStore().collection('Counter').doc('count').get()
            setCounter((querySnap.data().counter)+1)
        } catch(error) {
            alert("Something went wrong\n[Error]: "+ error)
        }
        try {
            await fireStore().collection('Counter').doc("count").update({
                counter: counter
            })
        } catch {
            // alert("Something went wrong\nPlease try again...")
        }
    }
4

2 回答 2

1

我相信您正在尝试访问尚未更新的变量，因为您尝试在同一范围内获取更新的代码。您可以做一个简单的测试来查看这是否是问题所在，将您的代码更改为如下所示：

const getCounter = async () => {
        let newCounter = null

        try {
            const querySnap = await fireStore().collection('Counter').doc('count').get()
            newCounter = (querySnap.data().counter)+1
        } catch(error) {
            alert("Something went wrong\n[Error]: "+ error)
        }
        try {
            setCounter(newCounter)
            await fireStore().collection('Counter').doc("count").update({
                counter: newCounter
            })
        } catch {
            // alert("Something went wrong\nPlease try again...")
        }
    }

这样，您可以保证您传递给 firebase 的值在发送前实时计算。

于 2021-04-18T07:18:34.410 回答
1

我相信您的问题在于setCounter异步运行并且不返回您可以与 async/await 一起使用的承诺。在您的情况下getCounter被调用，触发该setCounter函数，然后counter在setCounter更新counter.

我能想象的最好的解决方案是使用useEffect，因为它可以用来监视计数器的值，然后在更新时触发函数调用。因此，您可以执行以下操作：


const YourElement = () => {
   const getCounter = async () => {
        try {
            const querySnap = await fireStore().collection('Counter').doc('count').get()
            setCounter((querySnap.data().counter)+1)
        } catch(error) {
            alert("Something went wrong\n[Error]: "+ error)
        }
        try {
            await fireStore().collection('Counter').doc("count").update({
                counter: counter
            })
        } catch {
            // alert("Something went wrong\nPlease try again...")
        }
    }

   const postData = async () => {
        if (!adTitle || !adDescription || !yearOfPurchase || !price || !contactNo) {
            Alert.alert("Please fill all the Fields")
            return
        }

        try {
            getCounter()
            Alert.alert("Item Successfully Posted..")
            setAdTitle('')
            setAdDescription('')
            setYearOfPurchase('')
            setPrice('')
            setContactNo('')
            setImage('')
        } catch (err) {
            Alert.alert("Something went wrong\nPlease try again...")
        }

}

   useEffect(()=>{
      fireStore().collection("ads").add({
          adTitle,
          adDescription,
          yearOfPurchase,
          price,
          contactNo,
          image,
          uniqueID: counter,
          uid: Auth().currentUser.uid
          })},[counter])

   return <ChildElements/>
}

counter这样，数据只有在更新后才会发送到 Firebase 。

于 2021-04-18T03:53:07.330 回答