مشکل با آپدیت کردن استیت برای متغیرهای داینامیک

اشتباه تایپیه شما در کدتون نوشتین:

...prevDtate.[name]

باید D بشه S

این کد رو چندین بار عوض کردم. اینجا قرارش دادم اشتباه تایپی شده. با spread operator, بدونش.. همین مشکل هست
@kamran.davar

سوالمو یه جور دیگه بپرسم.. اگر یه استیت به این فرم داشته باشیم:

department:[{ id: null, matchList: [], matchFilterType: null }]

چه جوری به اون ادد میکنیم. قسمت array اون سوالم هست(matchList).
@kamran.davar
@sinashahoveisi
@mohsenbostan

کدرو از حالا داینامیک درآوردم به صورت زیر

 handleFilterChange = (value, name, filterType) => {   handleFilterChange = (matchList, matchFilterType, id) => {
// multipleFilter: { department: [{ id: null, matchList: [], matchFilterType: null }] },

this.setState(prevState=>({
    multipleFilter:{
        ...prevState.multipleFilter,
        department:[...prevState.multipleFilter.department,{id}]
    }
}),()=>  this.setState(prevState => ({
    multipleFilter: {
       ...prevState.multipleFilter,
       department:this.state.multipleFilter.department.map(
           item=>(item.id===id ? { matchList,matchFilterType: ProductFilterEnum.FilterType[matchFilterType], id } : item)
       )

    }

})))

    }

نتیجه ای که میده به این صورت هست :

multipleFilter
{department: Array(4)}

department
[{…}, {…}, {…}, {…}]

0
{filterType: "DEPARTMENT", id: 1, matchList: Array(…}

1
{filterType: "DEPARTMENT", id: 1, matchList: Array(…}

2
{filterType: "DEPARTMENT", id: 1, matchList: Array(…}

3
{filterType: "DEPARTMENT", id: 2, matchList: Array(…}

برای یک id به تعداد دفعاتی که matchList رو آپدیت میکنیم آبجکت میسازه. من میخوام هر بار فقط matchList آپدیت بشه نه همه ی آبجکت.
UI هم مثل زیره:

@sinashahoveisi
@kamran.davar
@mohsenbostan
@hesammousavi

راکت به من نوتفیکیشن ها ر و نشون نمیده
حتی وقتی منو تگ کردید

@parastooebrahimi ببنید بیایید یکم برگیردیم به عقب:

  this.setState(prevState => ({
            multipleFilter: {
                ...prevState.multipleFilter,
                [name]: {
                 ...prevDtate.[name],
                    matchList: value,
                    matchFilterType: ProductFilterEnum.FilterType[filterType],

                }
            }

        })) }

این کد رو یکم دیگه سعی کنیم اصلاحش کنیم:

این خط

...prevDtate.[name],

تبدیل بشه به این خط:

...prevState[name],

@kamran.davar
@sinashahoveisi
بعد از کلی تغییر دیگه تصمیم گرفتم در اینجور مواقع از نستینگ استفاده کنم به جای prevState و کدم به صورت زیر شد که درست کار میکنه

handleFilterChange = (matchList, matchFilterType, id) => {
        // multipleFilter: { department: [{ id: null, matchList: [], matchFilterType: null }] },
        switch (matchFilterType) {
            case 'DEPARTMENT':
                const multipleFilter = { ...this.state.multipleFilter };
                const currentDepartment = multipleFilter.department.find(x => x.id == id);
                if (currentDepartment) {
                    currentDepartment.matchList = matchList;
                } else {
                    multipleFilter.department.push({
                        id: id,
                        matchList: matchList,
                        matchFilterType: matchFilterType
                    });
                }
                this.setState({ multipleFilter });

                break;
                }

همیشه داینامیک بودن توصیه نمیشه ، شما میتونید هرجایی هرچیزی رو داینامیک کنید ولی واقعا ارزششو نداره مثل همینجا!
توی این کیس شما به نظرم اگه داینامیک نباشه خیلی ساختار Clean Code تری خواهید داشت مخصوصا اگه از redux استفاده میکنید!

@mrhex
ولی به نظر خودم اگر میشد داینامیک بنویسمش خیلی از تعداد فانکشن هایی که باید بنویسم کم میشد. الان این یه تیکه کد هست که مربوط به فیلتر کردن بر اساس department هست که خب برای 68 تای دیگه باید این کار رو انجام بدم که پارامترهای ورودی مشابهی دارن. سوییچی که توی کد قرار دادم برای همین هست.. واقعا کد کمتری میشد

در مورد داینامیک بودن توی این مورد شما درست میگید قطعا @parastooebrahimi