JiejieSK 2023-03-30 15:33 采纳率: 25%
浏览 29
已结题

关于#react.js#的问题,如何解决?(语言-javascript)

React类组件里使用setState时发现了出现了以下问题:

state = {
    mealsData: [
        {
            id: '1',
            title: '汉堡包',
            desc: '百分百纯牛肉配搭爽脆酸瓜洋葱粒与美味番茄酱经典滋味让你无法抵挡!',
            price: 12,
            img: '/img/meals/1.png',
            amount: 0
        },
        {
            id: '2',
            title: '双层吉士汉堡',
            desc: '百分百纯牛肉与双层香软芝,加上松软面包及美味酱料,诱惑无人能挡!',
            price: 20,
            img: '/img/meals/2.png',
            amount: 0
        },
        {
            id: '3',
            title: '巨无霸',
            desc: '两块百分百纯牛肉,搭配生菜、洋葱等新鲜食材,口感丰富,极致美味!',
            price: 24,
            img: '/img/meals/3.png',
            amount: 0
        }, {
            id: '4',
            title: '麦辣鸡腿汉堡',
            desc: '金黄脆辣的外皮,鲜嫩幼滑的鸡腿肉,多重滋味,一次打动您挑剔的味蕾!',
            price: 21,
            img: '/img/meals/4.png',
            amount: 0
        }, {
            id: '5',
            title: '板烧鸡腿堡',
            desc: '原块去骨鸡排嫩滑多汁,与翠绿新鲜的生菜和香浓烧鸡酱搭配,口感丰富!',
            price: 22,
            img: '/img/meals/5.png',
            amount: 0
        }, {
            id: '6',
            title: '麦香鸡',
            desc: '清脆爽口的生菜,金黄酥脆的鸡肉。营养配搭,好滋味的健康选择!',
            price: 14,
            img: '/img/meals/6.png',
            amount: 0

            
        }, {
            id: '7',
            title: '吉士汉堡包',
            desc: '百分百纯牛肉与香软芝士融为一体配合美味番茄醬丰富口感一咬即刻涌现!',
            price: 12,
            img: '/img/meals/7.png',
            amount: 0
        }
    ]}
filterMeals = keyWord => {
let  newMeals = this.state.mealsData.filter(item => item.title.indexOf(keyWord) !== -1 || item.desc.indexOf(keyWord) !== -1 )
    console.log(newMeals)
   this.setState( state => {
               return {
                state: {
                    mealsData: newMeals
                }
               }
       })
console.log(this.state.mealsData);
}

调用filterMeals 函数后 当形参keyWord = '汉'时,newMeals.length = 4,而this.state.mealsData.length = 7也就是在this.setState中newMeals并没有把值给this.state.mealsDate,请问这是为什么呢

  • 写回答

2条回答 默认 最新

  • 简效 2023-03-30 16:08
    关注

    你的setState 只需要 返回 {mealsData: newMeals} 就可以了,不需要再包一层state

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 创建了问题 3月30日

悬赏问题

  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数,无法执行二选一查询
  • ¥15 液位控制,当液位超过高限时常开触点59闭合,直到液位低于低限时,断开
  • ¥15 marlin编译错误,如何解决?
  • ¥15 有偿四位数,节约算法和扫描算法
  • ¥15 VUE项目怎么运行,系统打不开
  • ¥50 pointpillars等目标检测算法怎么融合注意力机制
  • ¥20 Vs code Mac系统 PHP Debug调试环境配置
  • ¥60 大一项目课,微信小程序
  • ¥15 求视频摘要youtube和ovp数据集