javascript - 无法摆脱 map 中唯一键的 react 警告

Question

我下面的代码有什么问题吗？我有 key={obj._id}，我希望我不会看到警告，但我仍然收到它。

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>
        )
    }

Answer 1

我认为您编码的某些内容是错误的。您应该在数组上应用函数“map”。

试试这个:

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>
        )
    }