简体   繁体   中英

Couldn't get rid of react warning of unique key in map

What's wrong with my below code? I had key={obj._id} and I expect I will not see the warning but I'm still getting it.

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

renderListItems(items){
        return(
            <div>
            {map(items, obj =>
                <div key={obj._id} className="panel-body panel-row">
                    <div  className="row">
                        <div className="col-md-12">
                            <h2 className="title">{obj.display_name}</h2>
                            <p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p>
                            <div className="actions_wrap">
                                <Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link>
                                <a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
            </div>
        )
    }

I think you are coding some things wrong. You should apply the function "map" over an array.

Try this:

renderListItems(items){
        return(
            <div>
            {items.map(obj =>
                <div key={obj._id} className="panel-body panel-row">
                    <div  className="row">
                        <div className="col-md-12">
                            <h2 className="title">{obj.display_name}</h2>
                            <p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p>
                            <div className="actions_wrap">
                                <Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link>
                                <a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
            </div>
        )
    }
items.map((obj, i) => <div key={i}></div>)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM