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日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度