مشکل نمایش مقدار قبلی استیت prevState در componentDidUpdate
سلام خدمت اساتید عزیز
من با بخش componentDidUpdate مشکل دارم استیت قبلی رو بهم نمیده و استیت فعلی رو بهم میده. چیکار کنم مشکل کجاست؟
یک دکمه ساده جهت تست داخل رندر تعریف کردم که با اون عمل میکنه و استیت قبلی رو بهم میده.
اما با تابع add که نوشتم عمل نمیکنه... واقعا گیج شدم. لطفا راهنماییم کنید.
class App extends Component{
state={
products:[
{id: 1, imgUrl: 'https://picsum.photos/100' , title: 'book1' , price: 25 , count: 3},
{id: 2, imgUrl: 'https://picsum.photos/101' , title: 'book2' , price: 65 , count: 5},
{id: 3, imgUrl: 'https://picsum.photos/102' , title: 'book3' , price: 33 , count: 7},
{id: 4, imgUrl: 'https://picsum.photos/103' , title: 'book4' , price: 12 , count: 9}
],
count:0
}
componentDidUpdate(prevProps,prevState){
console.log(prevState)
}
render(){
return <>
<button onClick={()=>{this.setState({count: this.state.count + 1})}}>number: {this.state.count}</button>
<Products products={this.state.products} add={this.add} remove={this.remove} />
</>
}
add = (id)=>{
const products = this.state.products.map(p=>{
if (p.id === id) p.count++
return p
})
this.setState({products})
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
متاسفانه کسی جواب نداد اما خودم جوابشو میدم تا دیگر دوستان استفاده کنند.
زمانی که از خود آرایه با spread یک کپی میگیریم و مقدار کپی گرفته رو میوتیت میکنیم مقدار prevState همان مقدار فعلی state ما هستش.
برای اینکه این مشکل حل بشه کپی یا کلون گرفتن از خود آرایه کافی نیست و باید از آیتمهای آرایه هم با spread کلون گرفته بشه. در اون صورت مشکل حل میشه و prevState مقدار قبلی state رو به ما نمایش خواهد داد.
در زیر دو روش رو نشون میدم برای کلون کردن که روش مپ هم مطمئن‌تره و هم کوتاه ترو خواناتر
// the first method
const newProducts = this.state.products.map(p => ({...p}) )
const index = newProducts.findIndex((p) => p.id === id);
newProducts[index].count++
this.setState({products:newProducts})
//the second method
const newProducts = [...this.state.products];
const index = newProducts.findIndex((p) => p.id === id);
const product = { ...newProducts[index] }
product.count++;
newProducts[index] = product;
this.setState({products:newProducts})