Parastoo Ebrahimi
4 سال پیش توسط Parastoo Ebrahimi مطرح شد
10 پاسخ

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

سلام. من باید یه متغیری رو ارسال کنم به سرور که شامل داده های خیلی زیادی میشه که اون داده ها رو در قالب استیت در آوردم . استیتم به این صورت هست :

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

این استیت کامل نیست و جای department میتونه یه اسم دیگه باشه که همه ی اینا اون داده ای رو تشکیل میدن که برای سمت سرور نیازه
من میخوام setState ای که استفاده میشه داینامیک باشه برای همین اون رو به صورت زیر آپدیت کردم:

handleFilterChange = (value, name, filterType) => {

        this.setState(prevState => ({
            multipleFilter: {
                ...prevState.multipleFilter,
                [name]: {

                    matchList: value,
                    matchFilterType: ProductFilterEnum.FilterType[filterType]
                }
            }

        }))
        console.log("value is ", value)

    }

value مقداری هست که میخوام استیت با اون مقدار دهی بشه. name هم مثل department هست که به صورت داینامیک میخوام از این تابع بگیره که چی الان باید آپدیت بشه. filtertype هم یک value دیگه هست که باز با اون استیت مقدار دهی میشه. این کد درست کار میکنه و مشکلی باهاش ندارم تا اینکه امتحان کردم اگه مثلا برای department بخوام یه مقدار دیگه اضافه کنم اون مقدار قبلی پاک میشه و مقدار جدید جایگزینش میشه. ولی من میخوام مقادیر قبلی باقی بمونن. setState رو به صورت زیر که تغییر میدم اونجایی که prevState.[name] هست ارور میده..

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

                }
            }

        }))

چه تغییری بدم که کد درست بشه؟
@kamran.davar
@sinashahoveisi
@hesammousavi
@mohsenbostan


ثبت پرسش جدید
کامران داور
تخصص : Front-end developer
@kamran.davar 4 سال پیش مطرح شد
0

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

...prevDtate.[name]

باید D بشه S


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش آپدیت شد
0

err

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


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش مطرح شد
0

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

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

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


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش آپدیت شد
0

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

 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 هم مثل زیره:
error

@sinashahoveisi
@kamran.davar
@mohsenbostan
@hesammousavi


کامران داور
تخصص : Front-end developer
@kamran.davar 4 سال پیش مطرح شد
0

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


کامران داور
تخصص : Front-end developer
@kamran.davar 4 سال پیش آپدیت شد
0

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

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

                }
            }

        })) }

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

این خط

...prevDtate.[name],

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

...prevState[name],

Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش مطرح شد
0

@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;
                }

آقای هگز
تخصص : برنامه نویس وب
@mrhex 4 سال پیش مطرح شد
1

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


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش مطرح شد
0

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


کامران داور
تخصص : Front-end developer
@kamran.davar 4 سال پیش مطرح شد
0

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام