警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。 li中已添加的关键道具

Question

我已经在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范围问题。

Answer 1

问题是TodoList的初始状态。 createTasks函数期望条目（属性）为包含对象的数组，其中每个对象应具有键id ， text和key，但其获取数组包含字符串。

警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。 li中已添加的关键道具

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-02-01 07:01:11

警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。 li中已添加的关键道具

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-02-01 07:01:11

解决方案1
2 已采纳 2017-02-01 07:01:11