Javascript 如何从状态中删除位于对象数组中的对象

我正在尝试按id从对象中的数组中删除对象。我不知道如何执行此操作…我看过其他几篇文章，但我觉得设置有点不同，所以我仍然无法理解

deleteFounds

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

我以前的

商店设置不同，每个用餐对象都有自己的
日期
键，我可以删除，但第一个对象（id:1）直到最后一个才删除。我最终重构了商店，使每个用餐对象都位于一个由实际日期分隔的数组中

所以现在我需要两个问题的帮助

如何正确删除已设置的my store对象
为什么正餐不会删除
App.js中的deletemine

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

上课时间延长了React.Component{
render（）{
const{day，finds}=this.props
让米尔斯列表；
如果（膳食[日]）{
膳食清单=膳食[日]
.map（（膳食、钥匙）=>
)
}
返回(
{day}
{膳食和膳食[日]&&mealsList}
)
}
}

膳食成分

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

class.Component{
静态上下文类型=静态上下文；
状态={
回信：“没有头衔”，
recipeImageUrl:“”，
showModal:错误
}
findRecipe=（recipeId，菜谱）=>{
const recipe=recipes.find（recipe=>recipe.id==recipeId）
如果（配方）{
这是我的国家({
回复：recipe.title，
recipeImageUrl:recipe.image\u url
})
}
}
componentDidMount（）{
const{recipes}=this.context
const{mean}=this.props
this.findRecipe（meal.recipe\u id，recipes）
}
handleClickDelete=（事件）=>{
const{day，meat}=this.props
常量{id}=1
event.preventDefault（）
this.context.deleteMedine（天，id）
}
toggleModal=（）=>{
这是我的国家({
showmodel:！this.state.showmodel
})
}
render（）{
const{RecipeTile，recipeImageUrl，showModal}=this.state；
const{mean}=this.props；
常量自定义样式={
覆盖：{
背景：“#4c645682”
},
内容：{
背景：“rgb（240）”
}
}
常量权限={
编辑：false，
加:错,，
删除：false
}
返回(
{showmodel&&
}
{recipeTitle}
{this.setState（{showmodel:true}}}/>
)
}
}
导出默认膳食
食谱id似乎是无关的，我认为不需要它，您应该能够按天和id删除一顿饭

其思想是在您打算更新的每个级别上粗略地复制state对象

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

问题-反应不良键
您正在使用数组索引作为
Days
组件中的react键

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

为什么您需要膳食和食谱ID？一天中的两个元素是否可以具有相同的用餐id？我想我已经回答了（2），但对于（1），我认为我们需要更多的上下文来了解您的商店与UI（即组件）的关系，可能与删除功能有关，虽然现在还不清楚为什么你可能有两个真相来源。嗯，我必须更深入地了解prevState，因为我以前从未使用过它。为了回答你关于recipeId的其他评论，我把recipe对象放在了商店外面，因为我认为它可能与删除这顿饭无关？它只是一个id，用于使用您的解决方案引用该餐的食谱（用于显示），我可以删除该餐对象…但它仍然没有删除正确的餐对象。我刚刚发现，无论我单击要删除哪顿饭，它都会在第一天删除最后一顿饭。所以对于周一的餐食，如果我点击餐食id 1，它将删除id 3，然后是2，然后是1@staysee可能处理程序没有被传递正确的值。你能更新你的问题以包括你的组件代码，以及你是如何映射你的UI和作为处理程序附加
deletemine
的吗？嗨，Drew，我刚刚用我的组件更新了我的问题@staysee我读对了吗，
fines
组件只渲染一个fine对象
deletemine
（
this.context.deletemine
）在
handleClickDelete
中通过
this.props.day
和
this.props.dine.id
调用？您是否在处理程序中记录了用餐id以确保它是您想要的？然后再次登录到
deletemine
？你能分享上下文代码吗？你删除那里的方式可能有点愚蠢。