تعریف کلیدهای منحصر به فرد برای آرایه فرزند در React

من یک کامپوننت React ساختم که منبع داده ای با قالب JSON دریافت می کند و یک جدول که قابلیت مرتب شدن دارد ایجاد می کند.

هر یک از سطرهای داده یک کلید منحصر به فرد دارد اما هنوز خطای:

Each child in an array should have a unique "key" prop.
Check the render method of TableComponent.

را دریافت می کنم. 

متد render کامپوننت TableComponent، کد زیر را بر می گرداند:

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

کامپوننت TableHeader یک سطر است و یک کلید منحصر به فرد هم به آن اختصاص داده شده است. 

هر row در rows با کامپوننت و کلید منحصر به فرد ایجاد شده است:

<TableRowItem key={item.id} data={item} columns={columnNames}/>

و کامپوننت TableRowItem هم به شکل زیر است:

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c) {
          return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

دلیل این خطا چیست؟

0
مسعود پرسیده شده در ۲۲ اسفند ۱۳۹۷
9 سوال
0 پاسخ
4امتیاز
Share in:
1 پاسخ

شما باید یک کلید برای هر فرزند و همچنین عناصر داخل فرزند مشخص کنید. React از این طریق می تواند تغییرات در DOM را handle کند.

در کد شما هر <TableRowItem key={item.id} data={item} columns={columnNames}/> سعی می کند تا برخی از فرزندانش را بدون کلید رندر کند.

این مثال را چک کنید.

key={i} را از عنصر <b></b> که داخل div قرار دارد حذف کنید و console را چک کنید. 

در کد نمونه زیر اگر نخواهیم یک کلید به هر عنصر <b> اختصاص دهیم و فقط بخواهیم object.city بروزرسانی شود، React مجددا به جای اینکه فقط element را رندر مجدد کند کل سطر را رندر مجدد می کند.

var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];

var Hello = React.createClass({

    render: function() {

      var _data = this.props.info;
      console.log(_data);
      return(
        <div>
            {_data.map(function(object, i){
               return <div className={"row"} key={i}> 
                          {[ object.name ,
                             // remove the key
                             <b className="fosfo" key={i}> {object.city} </b> , 
                             object.age
                          ]}
                      </div>; 
             })}
        </div>
       );
    }
});

React.render(<Hello info={data} />, document.body);

 

1
دانیال
پاسخ داده در ۲۶ اسفند ۱۳۹۷
0 سوال
43 پاسخ
27امتیاز
پاسخ شماپاسخ شما با موفقیت ثبت شد.پاسخی وارد نشده است.

ارسال پاسخ