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

Question

我正在尝试通过 id 从对象内的数组中删除一个对象。我不知道该怎么做……我看过其他几篇帖子，但我觉得设置有点不同，所以我还是不明白。

deleteMeals 不会删除正确的对象，即使我获取了正确的餐点 ID。 “星期一”也作为占位符/试图解决问题。

我之前的 store 设置不同，每个餐点对象都有自己的 day 键，我可以删除 - 除了第一个对象 (id: 1) 直到最后一个对象才会删除一。我最终重构了商店，以便每个用餐对象都在一个由实际 Day 分隔的数组中。

所以现在我需要帮助解决两个问题！

1. 如何根据我的商店对象设置正确删除
2. 为什么正确的饭菜不会删除

    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": [],
        }
   }

在 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
        }

天数组件

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>
        )

    }
}

膳食组件

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

recipe id 似乎是多余的，我认为不需要，您应该可以删除一天中的餐点和 id。

这个想法是在您打算更新的每个级别浅层复制状态对象。

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),
    },
  }));
}

问题 - React Key 不佳

您正在使用数组索引作为 Days 组件中的反应键。

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

例如，如果您有一个包含三餐的数组，并且您删除了第一餐或第二餐，那么反应键仍将是索引 0 和 1。长度会改变，第三餐将不再呈现，但因为反应前两个的关键在重新渲染它们时没有改变反应保释。

Lists and Keys

我们不建议使用索引作为键，如果项目的顺序可能 改变。这可能会对性能产生负面影响，并可能导致问题 与组件状态。查看 Robin Pokorny 的文章 in-depth explanation on the negative impacts of using an index as a key.

链接文章的重要内容是这份清单

1. 列表和项目是静态的——它们不会被计算也不会改变；
2. 列表中的项目没有 ID；
3. 列表永远不会重新排序或过滤。

当满足所有条件时，您可以安全地使用索引作为键。

数组索引在技术上可以作为反应键，只要您不要通过插入或删除元素来改变数组.由于您的 meal 对象具有 id 属性，因此它应该用于反应键。

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