آفلاین
user-avatar

از بین رفتن اطلاعات هنگام رفرش صفحه یا navigate کردن

3 سال پیش
توسط Amin Khademian آپدیت شد
آفلاین
user-avatar
someguywhoisnothere ( 89 تجربه )
3 سال پیش

سلام
من یه تازه کار هستم توی ری اکت .
من یه سری اطلاعات رو از طریق LINK توی REACT-ROUTER میفرستم به یه کامپوننت دیگه
و اطلاعات درست نمایش داده میشن ولی وقتی صفحه رفرش میشه یا یه صفحه میری جلوتر و برمیگردی این اطلاعات که با لینک فرستاده شده از بین میرن
و باید برگردی صفحه اول و دوباره کلیک کنی تا اطلاعات فرستاده بشن و هدایت بشی به کامپوننت بعدی

کد ارسال دیتا با کلیک

<Link to={{
                                pathname: `/article/${detail.slug}`,
                                query: detail,
                            }}>
                        {detail.title} </Link>
                        </Item.Header>

این دیتارو توی صفحه دیگه ای با

this.props.location.query

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

بهترین پاسخ انتخاب شده توسط someguywhoisnothere
Amin Khademian
3 سال پیش

کلا درست متوجه نشدم که توی صفحه جدید چه دیتایی می خوای بگیری اما چون گفتی وبلاگه فرض رو بر این میزارم که دیتای یه مقاله رو می خوای از api بگیری :
ببین تو اول باید یه روتر تعریف کنی و توی path اون یه ID ست کنی مثلا :

path="/blog/posts/:id"

اینجوری میتونی یه کامپوننت یا صفحه دزست که که توی اون با

this.props.match.params.id

میتونی اون ID رو بگیری حالا مثلا این ID اون مقاله هست که می خوای نشون بدی توی صفحه یه ریکوئست میزنی به API که مقاله با این id رو بگیری .
کاری که لینک انجام میده هم اینکه فقط آی دی مقاله رو به url اضافه میکنه :

<Link to={${/blog/posts/${postID}} > ادامه مقاله</Link>
آفلاین
user-avatar
Amin Khademian ( 963 تجربه )
3 سال پیش
تخصص : Front-End Developer

این که خیلی طبیعیه دیتایی که از یه کامپوننت دیگه میاد با رفرش از بین میره
این دیتایی که میفرستی چی هست اصن و چه لزومی داره اینجوری فرستاده بشه ؟!

آفلاین
user-avatar
someguywhoisnothere ( 89 تجربه )
3 سال پیش

ببین این یه سیستم بلاگ هستش
و یه لیستی از مقالات دارم که توی صفحه اول لودش کردم
وقتی کلیک میکنم این اطلاعات پست رو هم میفرستم تو صفحه بعد
که با رفرش میپره دنبال یه راهی بودم این انجام نشه

اطلاعات رو با json-server شبیه api کردم و با axios گرفتمشون

اصلا چیزی که من میخوام امکان داره ؟

آفلاین
user-avatar
احسان ( 256 تجربه )
3 سال پیش

سلام .
شما میتونید از redux برای ارسال اطلاعاتتون به یک state سراسری که در همه جای اپ داشته باشید و با نویگیت کردن هم اون اطلاعات در دسترستون باشه استفاده کنید . منتها اگر زمان کافی برای یادگیری اون ندارید میتونید از localStorage و یا sessionStorage استفاده کنید . البته پیشنهاد میکنم از session استفاده کنید بهتر هستش برای این مورد مگر اینکه شما بخواهید موردی رو ذخیره نگه داری که در اون صورت از localStorage استفاده کنید.ی چیزی شبیه کد زیر میشه :

    localStorage.setItem( 'localStorageName' , JSON.stringify([{},{}]));
    let getLocalStorageLogin = localStorage.getItem('localStorageName');
    let localStorageLogin = getLocalStorageLogin ? JSON.parse(getLocalStorageLogin) : [];
آفلاین
user-avatar
Amin Khademian ( 963 تجربه )
3 سال پیش
تخصص : Front-End Developer

استفاده از State سراسری فکر خوبیه اما با این کار باز هم با رفرش صفحه دیتا از بین میره این که بخوای اطلاعاتی مثل مقالات وبلاگ رو توی LocalStorage ذخیره کنی اصلا کار درستی نیست و اصلا برای این کار ساخته نشده . پیشنهاد من اینه که با استفاده از router ها ارسال param استفاده کنی ولی قبلا باید بدونم که دیتا رو از کجا و چجوری میگیری ؟ از API ؟

آفلاین
user-avatar
someguywhoisnothere ( 89 تجربه )
3 سال پیش

سلام مرسی از پاسختون
دیتارو خودم یه فایل جیسون ساختم و با json-server یه api الکی درست کردم
بااستفاده از لینک میفرستمشون صفحه بعد
اونجا هم استفاده میکنم ولی خب با رفرش میپره .
توی سوال اولم کدش رو گزاشتم که چطوری با لینک فرستادم .

آفلاین
user-avatar
Amin Khademian ( 963 تجربه )
3 سال پیش
تخصص : Front-End Developer

کلا درست متوجه نشدم که توی صفحه جدید چه دیتایی می خوای بگیری اما چون گفتی وبلاگه فرض رو بر این میزارم که دیتای یه مقاله رو می خوای از api بگیری :
ببین تو اول باید یه روتر تعریف کنی و توی path اون یه ID ست کنی مثلا :

path="/blog/posts/:id"

اینجوری میتونی یه کامپوننت یا صفحه دزست که که توی اون با

this.props.match.params.id

میتونی اون ID رو بگیری حالا مثلا این ID اون مقاله هست که می خوای نشون بدی توی صفحه یه ریکوئست میزنی به API که مقاله با این id رو بگیری .
کاری که لینک انجام میده هم اینکه فقط آی دی مقاله رو به url اضافه میکنه :

<Link to={${/blog/posts/${postID}} > ادامه مقاله</Link>
برای ارسال پاسخ باید وارد سایت شوید