Проблема в том, что userIngredients
- это переменная, которая создается при рендеринге компонента, и устанавливается в версию для состояния, когда этот рендеринг компонента. И когда вы запускаете асинхронную операцию (например, выборку), обратный вызов, который вы передаете этой операции, будет привязан к значениям с момента создания этого обратного вызова.
Исправление здесь довольно простое. Там, где вы рассчитываете свои новые ингредиенты, просто выполните любой обратный вызов, прежде чем возвращать значение, которое будет сохранено в состоянии.
Что-то вроде:
fetch(`https://***************.com/ingredients/${id}.json`, {
method: 'DELETE',
}).then(response => {
setLoading(false)
setUserIngredients(prevIngredients => {
// Figure out the new ingredients
const newIngredients = prevIngredients.filter(ingredient => ingredient.id !== id)
// Call your callback with the new ingredients
props.ingredients(newIngredients)
// Return the new ingredients to be stored in your state
return newIngredients
})
})