آپدیت آرایه در 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 برداشته میشه . مثلا تا یه حرف حتی اضافه کنم.
آیا راه دیگر یا بهتری برای آپدیت آرایه وجود نداره؟
ممنونم از دوستانی که پاسخ میدن
پاسخها
8
@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.haghani
اون چیزی که داخل کدهای شما به چشم میخوره و اشکال کد شما هست بنظرم، اینه که شما اصلا state ندارید و یا state ها رو update نمی کنید.
البته شاید State شما داخل قسمت معلوم شده زیر آپدیت میشه که با ستاره معلوم کردم درست هست ؟:
handleChange(Answer,index){
let answerList1=this.props.AnswerList;
answerList1[index]=Answer;
this.props.handleChange(answerList1); *****
}
بله ازونجا می ره تو کامپوننت اولی که نذاشته بودمش.
handleChange(Answer){
this.setState({answerList: Answer});
}گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
@sajjad.haghani
الان کدهاتون بسیار گیج کننده شده
اگر میتونید نمودار درختی ، یا شماتیک از فایلهاتون و اینکه چه componentی داره از دیگری استفاده میکنه ارائه بدید. که بشه مشکل رو تشخیص داد
@sajjad.haghani
بسیار عالی
الان مشکل دقیقا چی هست؟
کدوم input که focus از روش برداشته میشه؟ تو همین مثال شما چند پاسخ رو اضافه کردم مشکلی نداشت
مشکل همین پاسخ هایی هستند که اضافه میشن
میخوام که قابل تغییر باشن.
اما درست کار نمی کنه
@wozniak
ضمن تشکر از شما @wozniak که راهنماییتون باعث شد مشکلم حل بشه، در آخر وقتی متوجه شدم بدون key، در مرورگر Warning دارم(هرچند فکر نکنم مشکلی پیش بیاد) مقدار key رو index قرار دادم که جدا ازینکه درست کار می کرد Warning هم نداشتم.
سپاس