当对象位于对象数组中时如何从状态中删除对象

Question

I'm trying to delete an object from an array within an object by the id. I can't figure out how to do this...I've looked at several other posts but I feel like the set up is a little different so I still can't figure it out.

deleteMeals doesn't delete the correct object even though I am grabbing the correct meal id. The "Monday" is also there as a placeholder / trying to figure things out.

I had my store set up differently before, where each meal object had its own day key, and I was able to delete - except the first object (id: 1) would not delete until it was the last one. I ended up refactoring the store so that each meal object was in an array separated by the actual Day.

So now I need help with two issues please!

1. How to properly delete given my store object set up
2. Why the proper meal won't delete

    const store = {
    
       meals: {
            "Monday": [
                {
                    "id": 1,
                    "recipe_id": 2,
                     "user_id": 1
                },
                {
                    "id": 2,
                    "recipe_id": 1,
                    "user_id": 1
                },
                {
                    "id": 3,
                    "recipe_id": 3,
                    "user_id": 1
                }
    
            ],
            "Tuesday": [
                {
                    "id": 4,
                    "recipe_id": 4,
                    "user_id": 1
                }
            ],
            "Wednesday": [],
        }
   }

deleteMeal in App.js

deleteMeal = (day, mealId) => {
  this.setState(prevState => ({
  // copy existing state
  ...prevState,
  // update meals key
  meals: {
      // copy existing meals state
      ...prevState.meals,
     // update day key & filter meals array by id
     [day]: prevState.meals[day].filter( ({ id }) => id !== mealId),
  }
 }));
}

const contextValue = {
            recipes: this.state.recipes,
            meals: this.state.meals,
            addRecipe: this.addRecipe,
            deleteRecipe: this.deleteRecipe,
            updateRecipe: this.updateRecipe,
            addMeal: this.addMeal,
            deleteMeal: this.deleteMeal
        }

Days Component

class Days extends React.Component{
    render() {
        const { day, meals } = this.props
        let mealsList;

        if (meals[day]) {
            mealsList = meals[day]
                .map((meal, key) => 
                    <Meals 
                        key={key}
                        day={day}
                        meal={meal}
                    />
            )
        }
        
        return(
            <div className="Days">
                <h3>{day}</h3>
                {meals && meals[day] && mealsList}
            </div>
        )

    }
}

Meals Component

class Meals extends React.Component {
    static contextType = StashContext;

    state = {
        recipeTitle: 'No Title',
        recipeImageUrl: '',
        showModal: false
    }

    findRecipe = (recipeId, recipes) => {
        const recipe = recipes.find( recipe => recipe.id == recipeId)

        if (recipe) {
            this.setState({
                recipeTitle: recipe.title,
                recipeImageUrl: recipe.image_url
            })
        }
    }

    componentDidMount() {
        const { recipes } = this.context
        const { meal } = this.props

        this.findRecipe(meal.recipe_id, recipes)
    }

    handleClickDelete = (event) => {
        const { day, meal } = this.props
        const { id } = meal
        event.preventDefault()
        this.context.deleteMeal(day, id)
    }

    toggleModal = () => {
        this.setState({
            showModal: !this.state.showModal
        })
    }

    render(){
        const { recipeTitle, recipeImageUrl, showModal } = this.state;
        const { meal } = this.props;

        const customStyles = {
            overlay: {
                background: '#4c645682'
            },
            content: {
                background: 'rgb(240 240 240)'
            }
        }

        const permissions = {
            edit: false,
            add: false,
            delete: false
        }

        return (
            <div className="Meals">
                {showModal && 
                    <DisplayModal 
                        meal={meal} 
                        customStyles={customStyles} 
                        showModal={showModal}
                        closeModal={this.toggleModal}
                        label="Meal Modal"
                        permissions={permissions}
                    />
                }

                <div className="Meals__info">
                    <div className="info_box left">
                        <div className="Meals__img">
                            <img src={recipeImageUrl} alt="Placeholder" />
                        </div>
                    </div>

                    <div className="info_box middle">
                        <div className="Meals__recipe-title">
                            {recipeTitle}
                        </div>
                    </div>
                    <div className="info_box right">
                        <div className="Meals__options">
                            <FontAwesomeIcon
                                icon={faEye} 
                                onClick={e => {this.setState({showModal: true})}} />
                            <FontAwesomeIcon 
                                icon={faBackspace} 
                                onClick={this.handleClickDelete} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Meals

Answer 1

The recipe id appears to be extraneous, I don't think it is needed, you should be able to delete a meal by day and id.

The idea is to shallowly copy the state object at each level you intend to update.

deleteMeal = (day, mealId) => {
  this.setState(prevState => ({
    // copy existing state
    ...prevState,
    // update meals key
    meals: {
      // copy existing meals state
      ...prevState.meals,
      // update day key & filter meals array by id
      [day]: prevState.meals[day].filter(({ id }) => id !== mealId),
    },
  }));
}

Issue - Poor React Key

You are using the array index as the react key in your Days component.

meals[day].map((meal, key) => (
  <Meals 
    key={key} // <-- array index!!
    day={day}
    meal={meal}
  />
))

If you for example had an array of three meals and you delete the first or second, the react keys would still be index 0 and 1. The length would change and the 3rd meal would no longer be rendered, but because the react key for the first two didn't change react bails on rerendering them.

Lists and Keys

We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an in-depth explanation on the negative impacts of using an index as a key .

The important take-away from the linked article is this checklist

1. the list and items are static–they are not computed and do not change;
2. the items in the list have no ids;
3. the list is never reordered or filtered.

When all of them are met, you may safely use the index as a key .

Array indices are technically acceptable as react keys, so long as you don't mutate the array by inserting or deleting elements from it. Since your meal objects have an id property it should be used for the react key.

meals[day].map(meal => (
  <Meals 
    key={meal.id}
    day={day}
    meal={meal}
  />
))