sajjad
4 سال پیش توسط sajjad مطرح شد
8 پاسخ

آپدیت آرایه در State

سلام به همه دوستان
من یه لیست آرایه با نام AnswersList مثل این ["Answer1,"Answer2,"Answer3"] و به این شکل map کردم.

        let rows=[];
        this.props.AnswerList.map(
            (el,index)=>rows.push(<AnswerRow key={el} el={el} index={index} handleChange={this.handleChange}/>)
           )
        return(
            <div>{rows}</div>
        );

و اینم کامپوننت بعدیم هست که ازش استفاده کردم

<input type="text" name="answer" className="form-control"  value={this.props.el} onChange={this.handleChange} />

و حالا می خوام onChange داشته باشم که Input تغییر کرد بتونم لیستم رو آپدیت کنم

    handleChange(e){
        this.props.handleChange(e.target.value,this.props.index);
    }

وقتی بر می گرده به کامپوننت قبلی

    handleChange(Answer,index){
        let answerList1=this.props.AnswerList;
        answerList1[index]=Answer;
        this.props.handleChange(answerList1);
    }

و در نهایت میره کامپوننت اولی که اونجا در SetState جایگزین مقدار اولی میشه.
حالا سوال اینجاست که با این روش تا یه تغییری در input میدم سریع فوکس از روی input برداشته میشه . مثلا تا یه حرف حتی اضافه کنم.

آیا راه دیگر یا بهتری برای آپدیت آرایه وجود نداره؟

ممنونم از دوستانی که پاسخ میدن


ثبت پرسش جدید
woz
تخصص : fan of open source world
@wozniak 4 سال پیش مطرح شد
1

@sajjad.haghani
خط مشخص شده زیر به وسیله ی ستاره رو اگر حذف کنید مشکل حل میشه :

class Answers extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(Answer, index) {
    let answerList1 = this.props.AnswerList;
    answerList1[index] = Answer;
    this.props.handleChange(answerList1);
  }
  render() {
    let rows = [];
    this.props.AnswerList.map((el, index) =>
      rows.push(
        <AnswerRow
          key={el} ****
          el={el}
          index={index}
          handleChange={this.handleChange}
        />
      )
    );
    return <div>{rows}</div>;
  }
}

مشکل اینه که بعد از rerendering وقتی دوباره اینپوت ها ساخته میشه ، react میاد input جدید رو به عنوان قسمت جدیدی در نظر میگیره و اون رو جدید فرض میکنه و lost focus پیش میاد. پس اگر key رو روی این element ها حذف کنید مشکل حل میشه ( در کل روی المتنت هایی که اینگونه قابل ویرایش هستند key نباید گذاشت )


woz
تخصص : fan of open source world
@wozniak 4 سال پیش مطرح شد
1

@sajjad.haghani
اون چیزی که داخل کدهای شما به چشم میخوره و اشکال کد شما هست بنظرم، اینه که شما اصلا state ندارید و یا state ها رو update نمی کنید.
البته شاید State شما داخل قسمت معلوم شده زیر آپدیت میشه که با ستاره معلوم کردم درست هست ؟:

    handleChange(Answer,index){
        let answerList1=this.props.AnswerList;
        answerList1[index]=Answer;
        this.props.handleChange(answerList1); *****
    }

sajjad
تخصص : برنامه نویس
@sajjad123 4 سال پیش آپدیت شد
0

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

    handleChange(Answer){
        this.setState({answerList: Answer});
}

@wozniak


woz
تخصص : fan of open source world
@wozniak 4 سال پیش مطرح شد
0

@sajjad.haghani
الان کدهاتون بسیار گیج کننده شده
اگر میتونید نمودار درختی ، یا شماتیک از فایلهاتون و اینکه چه componentی داره از دیگری استفاده میکنه ارائه بدید. که بشه مشکل رو تشخیص داد


sajjad
تخصص : برنامه نویس
@sajjad123 4 سال پیش مطرح شد
woz
تخصص : fan of open source world
@wozniak 4 سال پیش مطرح شد
0

@sajjad.haghani
بسیار عالی
الان مشکل دقیقا چی هست؟
کدوم input که focus از روش برداشته میشه؟ تو همین مثال شما چند پاسخ رو اضافه کردم مشکلی نداشت
توضیح تصویر رو وارد کنید


sajjad
تخصص : برنامه نویس
@sajjad123 4 سال پیش مطرح شد
0

مشکل همین پاسخ هایی هستند که اضافه میشن
میخوام که قابل تغییر باشن.
اما درست کار نمی کنه
@wozniak


woz
تخصص : fan of open source world
@wozniak 4 سال پیش مطرح شد
1

@sajjad.haghani
خط مشخص شده زیر به وسیله ی ستاره رو اگر حذف کنید مشکل حل میشه :

class Answers extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(Answer, index) {
    let answerList1 = this.props.AnswerList;
    answerList1[index] = Answer;
    this.props.handleChange(answerList1);
  }
  render() {
    let rows = [];
    this.props.AnswerList.map((el, index) =>
      rows.push(
        <AnswerRow
          key={el} ****
          el={el}
          index={index}
          handleChange={this.handleChange}
        />
      )
    );
    return <div>{rows}</div>;
  }
}

مشکل اینه که بعد از rerendering وقتی دوباره اینپوت ها ساخته میشه ، react میاد input جدید رو به عنوان قسمت جدیدی در نظر میگیره و اون رو جدید فرض میکنه و lost focus پیش میاد. پس اگر key رو روی این element ها حذف کنید مشکل حل میشه ( در کل روی المتنت هایی که اینگونه قابل ویرایش هستند key نباید گذاشت )


sajjad
تخصص : برنامه نویس
@sajjad123 4 سال پیش مطرح شد
0

ضمن تشکر از شما @wozniak که راهنماییتون باعث شد مشکلم حل بشه، در آخر وقتی متوجه شدم بدون key، در مرورگر Warning دارم(هرچند فکر نکنم مشکلی پیش بیاد) مقدار key رو index قرار دادم که جدا ازینکه درست کار می کرد Warning هم نداشتم.
سپاس


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

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