反应 Firebase 数据未定义

Question

I'm trying to build a fintech website, and I have a users collection and a transactions collection. One user can send money to another user by using their phone number.

The user schema contains these

uid - string
phone - string
.....//other data

I need to achieve the following functionality

1. Enter phone number of target receiver
2. Get details of user with the entered phone number
3. Add this data to another collection called transactions

I tried doing that, but I'm getting a bug that in the 3rd step, the data from the 2nd step is undefined. Here's my code

const SendMoney = () => {

    const [receiverDetails, setRecieverDetails] = useState({})
    const [allUsers, setAllUsers] = useState([])
    const [receiverphone, setReceiverphone] = useState('')

    const usersCollectionRef = collection(db, "users")
    const getAllUsers = async () => {
        const data = await getDocs(usersCollectionRef)
        setAllUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
    }

    useEffect(() => {
        getAllUsers()
    }, [])

    const getRecieverDetails = (phone) => {
        const receiver = allUsers.filter(u => u.phone === phone)[0]
        setRecieverDetails(receiver)
    }

    const makeTransaction = async () => {
        getRecieverDetails(receiverphone)
        console.log(receiverDetails)  --------> prints {}

        
        const transactionsCollectionRef = collection(db, "transactions")
        await addDoc(transactionsCollectionRef,
            {
                toUser: receiverDetails.uid,
                //other data
            }
        )
    }

    return (
        <div>
            <h2>Send money</h2>
            <input placeholder='phone number' onChange={e => setReceiverphone(e.target.value)} />
            <input type="number" onChange={e => setAmount(e.target.value)} />
            <button onClick={makeTransaction}>send money</button>
        </div>

    )
}

export default SendMoney

My guess is that the addDoc function is called before the receiverDetails gets populated with data. I am not sure how to fix this bug

Answer 1

Calls to setState or the setter of a useState hook are asynchronous.

Don't use state to pass data between your own pieces of code, but instead use normal variables, and promises or async / await to synchronize.

const SendMoney = () => {
    const [receiverDetails, setRecieverDetails] = useState({})
    const [allUsers, setAllUsers] = useState([])
    const [receiverphone, setReceiverphone] = useState('')
    let users; // 👈 new variable

    const usersCollectionRef = collection(db, "users")
    const getAllUsers = async () => {
        const data = await getDocs(usersCollectionRef)
        users = data.docs.map((doc) => ({ ...doc.data(), id: doc.id })); // 👈 This is synchronouse
        setAllUsers(users); // 👈 This is asynchronous
    }

    useEffect(() => {
    }, [])

    const getRecieverDetails = (phone) => {
        await getAllUsers()
        const receiver = users.filter(u => u.phone === phone)[0]
        setRecieverDetails(receiver)
    }