someguywhoisnothere
7 سال پیش توسط someguywhoisnothere مطرح شد
6 پاسخ

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

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

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

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

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

this.props.location.query

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


ثبت پرسش جدید
Amin Khademian
تخصص : Front-End Developer
@khademianamin 7 سال پیش آپدیت شد
1

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

path="/blog/posts/:id"

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

this.props.match.params.id

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

<Link to={${/blog/posts/${postID}} > ادامه مقاله</Link>

Amin Khademian
تخصص : Front-End Developer
@khademianamin 7 سال پیش مطرح شد
2

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


someguywhoisnothere
@someguywhoisnotherefornow 7 سال پیش مطرح شد
0

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

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

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


احسان
@ehsan0fahamy 7 سال پیش آپدیت شد
0

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

    localStorage.setItem( 'localStorageName' , JSON.stringify([{},{}]));
    let getLocalStorageLogin = localStorage.getItem('localStorageName');
    let localStorageLogin = getLocalStorageLogin ? JSON.parse(getLocalStorageLogin) : [];

Amin Khademian
تخصص : Front-End Developer
@khademianamin 7 سال پیش مطرح شد
1

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


someguywhoisnothere
@someguywhoisnotherefornow 7 سال پیش مطرح شد
0

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


Amin Khademian
تخصص : Front-End Developer
@khademianamin 7 سال پیش آپدیت شد
1

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

path="/blog/posts/:id"

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

this.props.match.params.id

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

<Link to={${/blog/posts/${postID}} > ادامه مقاله</Link>

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

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