![](/img/trans.png)
[英]Warning: Each child in an array or iterator should have a unique “key” prop. Keys are already present
[英]Warning: Each child in an array or iterator should have a unique “key” prop.; key prop already added in li
我已經在TodoItems
的li
項目中添加了key
道具后得到了這個警告:
警告:數組或迭代器中的每個子代都應具有唯一的“鍵”道具。 檢查
TodoItems
的渲染方法
我有以下頁面:
<!DOCTYPE html>
<html>
<head>
<title>todo-list</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-beta.3/react-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.css" rel="stylesheet">
<head>
<body>
<div style="margin-bottom: 35px">
<a class="nav-link" href="/clock">clock</a>
<a class="nav-link" href="/counter">counter</a>
<a class="nav-link" href="/data-table-basic">data-table-basic</a>
<a class="nav-link" href="/query-params-react-router">query-params-react-router</a>
<a class="nav-link" href="/todo-list">todo-list</a>
<a class="nav-link" href="/validated-form">validated-form</a>
</div>
<p>
<a href="https://www.kirupa.com/react/simple_todo_app_react.htm" target="_blank">The tutorial link</a>
</p>
<div id="entry"></div>
<script>
function determineMode(filepath) {
var modeString = "ace/mode/" + filepath;
return modeString;
}
</script>
<script src="/static/ace-builds2/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.getSession().setMode(determineMode('html'));
editor.session.setNewLineMode("unix");
editor.setTheme("ace/theme/monokai");
editor.setFontSize(15);
</script>
<script type="text/babel">
var destination = document.querySelector("#entry"); var TodoItems = React.createClass({ createTasks: function(item){ return this.props.entries.map(item => { return (
<li data-bind-thisthing={item.key} key={item.key}>
<span>{item.text + " "} </span>
<a href="#" data-id="{item.id}" className="remove-filter" onClick={()=> this.props.remove(item)}
>
remove
</a>
</li>
) }); }, render: function(){ return (
<ul className="theList">
{this.createTasks()}
</ul>
); } }); var TodoList = React.createClass({ getInitialState: function(){ return { items: [ 'If user clicks add button and input is empty, set a red border and focus the input box', 'Allow interactive DOM update of component when user edits code box', 'Allow categories for things like angular2, knockout, etc', 'Allow user to save new code snippets after starting in a sandbox', ] }; }, addItem: function(e) { var itemArray = this.state.items; if (this._inputElement.value.length > 0){ itemArray.push( { text: this._inputElement.value, key: this.state.items.length } ); this._inputElement.value = ""; this.setState({ items: itemArray }) } e.preventDefault(); }, // removing items from a list // http://stackoverflow.com/questions/27817241/how-to-remove-an-item-from-a-list-with-a-click-event-in-reactjs removeItem: function(item){ var items = this.state.items.filter(function(itm){ return item.key !== itm.key; }); this.setState({ items: items }); }, render: function() { return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a)=> this._inputElement = a} placeholder="enter task" />
<button type="submit">add</button>
</form>
</div>
<TodoItems remove={this.removeItem} entries={this.state.items} />
</div>
); } }); ReactDOM.render(
<div>
<TodoList/>
</div>, destination );
</script>
</body>
</html>
奇怪的問題通常看起來像是this
范圍問題。
問題是TodoList的初始狀態。 createTasks函數期望條目 (屬性)為包含對象的數組,其中每個對象應具有鍵id , text和key,但其獲取數組包含字符串。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.