React Native：立即更新 useState？

Question

How can I update a List with useState instant? Here is my code I want to update the userIngredientsList instant so the user gets the new amount instant on his screen.

 function handleItemAmount(id) { userIngredientsList.forEach((item) => { if (item.id == id) { item.amount = item.amount + 1 } }) firebase.firestore().doc("ingredients/" + user.uid).update({ ingredients: userIngredientsList }) setUserIngredientsList(userIngredientsList) }

The database is working, but the local list isn't.

Answer 1

You can use .map() instead of .forEach() to create a new array, also you can use ... assignment to copy each items because you cannot mutate the original array from useState based on the hooks rule.

I would try as the following:

function handleItemAmount(id) {
    const mappedIngredients = userIngredientsList.map(e => ({
       ...e,
       amount: e.id === id ? e.amount + 1 : e.amount
    }));

    firebase.firestore().doc("ingredients/" + user.uid).update({
      ingredients: mappedIngredients 
    })

    setUserIngredientsList(mappedIngredients)
}