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,请问这是为什么呢