مشکل تغییر یک لیست در React

react

#1

با درود خدمت دوستان . متاسفانه شروع به یادگیری React کردم و یک مشکل در شروع کار دارم .

در فایل app.js من یک لیست درست کردم و همینطور یک فانکشن که توی لیست رو تغییر بده

class App extends Component {
  state = {
    persons: [
      { name: 'Max', age: 28 },
    ],
    otherState: 'some other value',
    showPersons: false
  }

و فانکشن

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({
      showPersons: !doesShow
    });
  }

تا اینجا به راحتی انجام شده و مشکلی نبود . حالا من می خوام یک لیست دیگری درست کنم به شرح زیر :

kkk = {
  State: false,
  show: true
}

حالا هست که من نمی تونم داخل این مورد رو تغییر بدم به صورت مثال کد مشکل دار :

nTestChange = () => {
  const doesShow = this.kkk.show;
  this.setState({
    show: !doesShow
  });

فکر می کنم کد this.setState هنوز اولین لیستی که ساختم رو می خونه و اصلا لیست kkk رو نمی شناسه . مشکلم با نوشتن توی اولین لیست حل می شه ولی این مورد بیرون از کنترل من می شه یعنی دسترسی ندارم تمام فکرمو مشغول می کنه .

با تشکر


#2

یکی از احتمقانه ترین مشکلات جاوا اسکریپت رو می خوام برات رو کنم.
کد زیر رو به کلاست اضافه کن:

constructor() {
this.nTestChange = this.nTestChange.bind(this)
this.togglePersonsHandler = this.togglePersonsHandler.bind(this)

البته state‍ رو هم باید ببری تو constructor‍


#3

درود سمیر جان . من این موارد شما فرمودید رو اضافه کردم


در کد بالا اگر مشاهده کنید من یک لیست دارم که در فانکشن زیرش می خوام که آبدیت بشه یا تغییر کنه

و تو این خط می خوام طرف کلیک کرد نمایش و همینطور مخفی کردن رو انجام بده

ولی متاسفانه جواب گو نیست . مشخص هم نیست چی باید سرچ کنم هرچی سرچ کردم به جایی نرسیدم .

اینم لینک پوشه src من از پروژه ری اکت

39 pm

روی Test fight زده شد لیست kkk که توش show: true داره در تابع nTestChange تبدیل به show: false بشه ولی متاسفانه عمل نمی کنه ولی لیست sate اگر چیزی بزارم توش مثل هلو کار می کنه.

دیوانه کرده منو . چرا باید انقدر پیچیدگی تو چنین چیز ساده ای باشه

به روز رسانی

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


#4

خاک بر سر ری اکت و سازندگانش :grin: از هر گلی در جاوااسکریپت یک بویی بدی می یاد ولی اولش خیلی دلپذیر هست. متاسفانه فکر می کنم بهترینشون ری اکت باشه .

مشکل من حل شد با راهنمایی هایی که در پست بالا استک قرار دادم ولی یک موردی متوجه شدم که دیگر درست شدن مشکل من هیچ تاثیری نداره . متاسفانه فقط this.state می تونه در گرافیک یا ui صفحه rewrite کنه و آبجکت های دیگه خیر . اونا فقط می تونند کاری رو انجام بدند ولی در گرافیک تاثیری ندارند متاسفانه.

کدمو هم به روز کردم .


#5

یکم در مورد فلسفه ریکت و دلیل وجودش و اینکه قراره چه مشکلی رو حل کنه تحقیق کنی بد نیست،


#7

پست یکم قدیمیه ولی اگه هنوز مشکل data binding داری میتونی از پلاگین transform-class-properties واسه babel استفاده کنی که دیگه نیازی به constructor نداشته باشی


#8

ممنون مشکلم حل شد کمی با هاش اراه اومدم تو پیکره خودش ولی کمی اذیت می کنه ممنون از پیشنهادتون


#9

سلام
میدونم پست قدیمی هست ولی شما میتونید با استفاده از Arrow function دیگه نیازی به bind کردند نداشته باشید. یک چیز دیگه که میخوام بگه اینه که وقتی میخواین State رو عوض کنید که این تغییر وابسته به مقدار قبلی State بهتر که از روش زیر استفاده کنید:

this.setState(prevState=> {
    return {
        showPerson:!prevState.showPerson
    }
})