آپدیت نشدن کنترلر در کامپوننت مشترک
سلام.
من یه کامپوننتی دارم که توی سه تا صفحه گذاشتمش. توی هر کدوم از صفحه ها کاربر میتونه مقادیر رو تغییر بده و بعد ذخیره کنه. مشکل من اینه که وقتی کاربر توی یکی از صفحه مثلا اسم رو عوض میکنه توی صفحات دیگه مقدار اسم همون مقدار قبلیه.. من از فانکشنال بیس کامپوننت ها استفاده کردم . ممنون میشم کمک کنید که مشکل کجاست.
این هم کد مربوط به اینپوت هست که اگه دو بار توی یه صفحه تکرارش کنم، با تغییر تکست داخل یک کدوم انتظار میره اون یکی هم آپدیت بشه ولی نمیشه
import React, { useState } from 'react';
import {connect} from 'react-redux' ;
const TestCampaign = () => {
const [myText, setMyText] = useState("")
return (
<React.Fragment>
<input type="text" className="form-controler" value={myText} onChange={(e) => setMyText(e.target.value)} />
</React.Fragment>
)
}
export default connect()(TestCampaign);
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@kamran.davar
مشکلم رو حل کردم و اشکال خیلی خیلی ظریف بود. توی داکیومنت ریداکس گفته که به صورت مستفیم state رو آپدیت نکنید. یه کپی ازش بسازید و اون رو آپدیت کنید و همون رو به سمت reducer بفرستید. من مستقیم آپدیتش میکردم.
* The root state value is usually an object. It's important that you should
* not mutate the state object, but return a new object if the state changes.کد غلط :
let details = props.selectedCampaignDetailDataکد درست :
let details = { ...props.selectedCampaignDetailData };بعد اون پارامتری که میخوایم آپدیت میکنیم و ریدیوسر رو آپدیت میکنیم
احتمالا مشکل ازینجاست که دیتای اینپوت ها از استیت های مختلف گرفته میشه. برا حل این مشکل:
const ParentComponent = () => {
const [myText, setMyText] = useState("");
return (
<React.Fragment>
<ChildComponent data={mytext} setData={setMyText} />
<ChildComponent data={mytext} setData={setMyText} />
</React.Fragment>
);
};
const ChildComponent = ({ data, setData }) => {
return (
<React.Fragment>
<input
type="text"
className="form-controler"
value={data}
onChange={(e) => setData(e.target.value)}
/>
</React.Fragment>
);
};
@kamran.davar نه اینطور نیست دیتای جفت اینپوت ها یک استیت هست. کدی که گذاشتم ببینید. دقیقا این کد رو دو بار تکرار کردم
این چیزی که شما پیاده سازی کردین دیتای هر اینپوت یک استیت جداگانه هست که در اون کامپوننت تعریف شده.
توی کدی که من نوشتم دیتای جفت اینپوت ها یکی هستن.
@kamran.davar توی جفت input ها value فقط هست myText . کجا متفاوته ؟
من میخوام یه کامپوننتی داشته باشم که توی یه صفحه ی دیگه عینا دو بار تکرارش کنم. نمیخوام هیچ props ای هم بهش بدم. با تغییر یکی از اونها چون هر دوشون روی استیت myText تغییر ایجاد میکنن توقع میره اون یکی input هم تغییر کنه
اشتباه همین جاست که شما فک میکنید mytext یه موجودیت واحده. نه این طور نیست. شما هر بار که <TestCampaign/> استفاده میکنید در ساختار درختی کامپوننت هاتون یک کامپوننت جدید همراه با تمام استیت هاش ساخته میشه.
یک مثال قابل لمس بزنم. شما فرض کنید شرکت ایرانخودرو میره یه پژو از فرانسه میخره و هزار تا از روش میسازه. حالا اگه باک بنزین یکی ازون هزار تا پر بشن آیا باک ماشین اصلی پر میشه؟ یا باکه 999 تا دیگه پر میشه؟ خیر. همه باک ها عین هم هستن و دقیقا از روی باک ماشین اصلی ساخته شدن اما هر کدوم متعلق به یک ماشین مجزا هستن.
اون چیزی که شما میخواین راه حلش همونیه که گفتم. با کانتکست و ریداکس هم هم قابل پیاده شدنه.
@kamran.davar
منظورتون رو متوجه شدم. الان کد های بالا رو در نظر بگیرید. با تغییر تکست اون رو توی ریدیوسر ریداکس ذخیره میکنم. و با استفاده از useEffect هر موقه که پارامتر ریدیوسر تغییر کرد استیت رو برای myText آپدیت میکنم. ولی باز هم مشکل حل نمیشه
useEffect(() => {
setDescription(props.selectedCampaignDetailData.description)
}, [props.selectedCampaignDetailData])@kamran.davar
مشکلم رو حل کردم و اشکال خیلی خیلی ظریف بود. توی داکیومنت ریداکس گفته که به صورت مستفیم state رو آپدیت نکنید. یه کپی ازش بسازید و اون رو آپدیت کنید و همون رو به سمت reducer بفرستید. من مستقیم آپدیتش میکردم.
* The root state value is usually an object. It's important that you should
* not mutate the state object, but return a new object if the state changes.کد غلط :
let details = props.selectedCampaignDetailDataکد درست :
let details = { ...props.selectedCampaignDetailData };بعد اون پارامتری که میخوایم آپدیت میکنیم و ریدیوسر رو آپدیت میکنیم
این مفهوم mutate توی ریدیوسر های ریداکس خیلی مهمه و اوایل خیلی برای من ساده نبود... اما توی سال های اخیر یک نسخه دیگه از ریداکس منتشر شده به اسم redux tool kit که اونجا خیلی از کارها ساده تر انجام میشه از جمله اینکه همین mutete رو لازم نیست شما هندل کنید و خودش اینو انجام میده.
به نظرم هر کی امسال میخواد ریداکس یاد بگیره خوبه که همین redux toolkit رو یاد بگیره. @parastooebrahimi