React Native 状态不通过 React 的 setState 方法更新

React Native state not updating through useSate Methed of React

我的代码中似乎有什么问题， 我正在创建一个基于 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)

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

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[=57] 获取当前 counter 值 =]然后将该值增加一个然后更新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...")
        }
    }

我认为您的问题在于 setCounter 是 运行 异步的，而不是 return 您可以与 async/await 一起使用的承诺。在您的情况下，调用 getCounter，触发 setCounter 函数，然后在 setCounter 更新 counter.[=19= 的值之前将 counter 发送到 firebase ]

我能想到的最好的解决方案是使用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。

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

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 的值在发送之前是实时计算的。