[英]Warning: Each child in an array or iterator should have a unique “key” prop.; key prop already added in li
I am getting this warning after already adding the key
prop to the li
items in TodoItems
: 我已经在
TodoItems
的li
项目中添加了key
道具后得到了这个警告:
Warning: Each child in an array or iterator should have a unique "key" prop.
警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 Check the render method of
TodoItems
检查
TodoItems
的渲染方法
I have the following page: 我有以下页面:
<!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>
Weird issues normally seem like this
scope problems. 奇怪的问题通常看起来像是
this
范围问题。
Problem is initial state of TodoList. 问题是TodoList的初始状态。 createTasks function is expecting entries (props) an array containing objects where each object should have keys id , text and key but its getting array containing strings.
createTasks函数期望条目 (属性)为包含对象的数组,其中每个对象应具有键id , text和key,但其获取数组包含字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.