Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ListView`

问题:

I built an app with ReactNative both for iOS and android with a ListView. When populating the listview with a valid datasource, the following warning is printed at the bottom of the screen:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ListView.

What is the purpose of this warning? After the message they link to the following page: https://fb.me/react-warning-keys, where complete different things are discussed which have nothing to do with react native, but with web based reactjs.

My ListView is built with those statements:

render() {     var store = this.props.store;      return (                ); } 

My DataSource consists of something like:

    var detailItems = [];      detailItems.push( new DetailItem('plain', store.address) );     detailItems.push( new DetailItem('map', '') );      if(store.telefon) {         detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );     }     if(store.email) {         detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );     }     detailItems.push( new DetailItem('moreInfo', '') );      this.setState({         dataSource: this.state.dataSource.cloneWithRows(detailItems)     }); 

And the ListView-Rows are rendered with stuff like:

        return (             {item.headline}{item.text}         ); 

Everything works fine and as expected, except the warning which seems to be complete nonsense to me.

Adding a key-property to my "DetailItem"-Class didn't solve the issue.

This is, what really will be passed to the ListView as a result of "cloneWithRows":

_dataBlob:  I/ReactNativeJS( 1293):    { s1:  I/ReactNativeJS( 1293):       [ { key: 2, I/ReactNativeJS( 1293):           type: 'plain', I/ReactNativeJS( 1293):           text: 'xxxxxxxxxx', I/ReactNativeJS( 1293):           headline: '', I/ReactNativeJS( 1293):           icon: '' }, I/ReactNativeJS( 1293):         { key: 3, type: 'map', text: '', headline: '', icon: '' }, I/ReactNativeJS( 1293):         { key: 4, I/ReactNativeJS( 1293):           type: 'contact', I/ReactNativeJS( 1293):           text: '(xxxx) yyyyyy', I/ReactNativeJS( 1293):           headline: 'Anrufen', I/ReactNativeJS( 1293):           icon: 'fontawesome|phone' }, I/ReactNativeJS( 1293):         { key: 5, I/ReactNativeJS( 1293):           type: 'contact', I/ReactNativeJS( 1293):           text: 'xxxxxxxxx@hotmail.com', I/ReactNativeJS( 1293):           headline: 'Email', I/ReactNativeJS( 1293):           icon: 'fontawesome|envelope' }, I/ReactNativeJS( 1293):         { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] }, 

As one key see, each record has a key property. The warning still exists.

回答1:

I've had exactly the same problem as you for a while now, and after looking at some of the suggestions above, I finally solved the problem.

It turns out (at least for me anyway), I needed to supply a key (a prop called 'key') to the component I am returning from my renderSeparator method. Adding a key to my renderRow or renderSectionHeader didn't do anything, but adding it to renderSeparator made the warning go away.

Hope that helps.

回答2:

You need to provide a key.

Try doing this in your ListView Rows if you have a key property:

If not, try just adding the item as the key:

回答3:

You can also use the iteration count (i) as the key:

render() {     return (       
         {this.props.results.map((result, i) => (           
{result.text}
         ))}       
     ); } 

回答4:

Change your code from:

render() {     return (       
         {this.props.results.map((result) => (           
{result.text}
         ))}       
     ); } 

To:

render() {     return (       
         {this.props.results.map((result) => (           
{result.text}
         ))}       
     ); } 

Then solved.

回答5:

I fixed it by add a property to renderSeparator Component,the code is here:

_renderSeparator(sectionID,rowID){     return (              ); } 

The key words of this warning is "unique", sectionID + rowID return a unique value in ListView.

回答6:

This warning comes when you don't add a key to your list items.As per react js Docs -

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>   
     {number}   
 ); 

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

const todoItems = todos.map((todo) =>   
     {todo.text}   
 ); 

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort

const todoItems = todos.map((todo, index) =>   // Only do this if items have no stable IDs   
     {todo.text}   
 ); 

回答7:

The specific code I used to fix this was:

  renderSeparator(sectionID, rowID, adjacentRowHighlighted) {     return (            )   } 

I'm including the specific code because you need the keys to be unique--even for separators. If you do something similar e.g., if you set this to a constant, you will just get another annoying error about reuse of keys. If you don't know JSX, constructing the callback to JS to execute the various parts can be quite a pain.

And on the ListView, obviously attaching this:

Credit to coldbuffet and Nader Dabit who pointed me down this path.

回答8:

Assuming the renderDetailItem method has the following signature...

(rowData, sectionID, rowID, highlightRow)  

Try doing this...

回答9:

Seems like both the conditions are met, perhaps key('contact') is the issue

 if(store.telefon) {     detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') ); } if(store.email) {     detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') ); } 

文章来源: Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ListView`