Question

首先，我们想要通过material-ui和ReactJS告诉您Redux pattern。

问题：

我正在使用List ListItem填充一组数组。但是当更新数组时，会更改道具并调用render() Component方法，当数据开始第二次填充时，它会显示键已存在的错误。

代码：

 render(){
    return <div>
             <List id='requestList'>{this.bindListItems()}</List>
         </div>
    }

  bindListItems() {

        var listview = document.getElementById('requestList');

        var sortedList = this.props.requestList.sort(function (a, b) {
            return (a.requestedTime - b.requestedTime);
        });

        return sortedList.map((name, index) => {
            var listItem = <ListItem key={name.requestKey} primaryText={name.description} />;
            return listItem
        });


    }

错误Stacktrace

bundle.js:1099 Warning: flattenChildren(...): Encountered two children with the same key, `-KnIXRCJbOqY6rykfand`. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by List)
    in List (created by RequestListContainer)
    in div (created by RequestListContainer)
    in div (created by RequestListContainer)
    in RequestListContainer (created by Connect(RequestListContainer))
    in Connect(RequestListContainer) (created by Home)
    in div (created by Home)
    in div (created by Home)
    in Home (created by Connect(Home))
    in Connect(Home) (created by Main)
    in Main (created by Connect(Main))
    in Connect(Main) (created by AppBarExampleIconButton)
    in MuiThemeProvider (created by AppBarExampleIconButton)
    in AppBarExampleIconButton
    in Provider

如何解决这个问题？

我应该删除之前的ListItem并添加新的ListItem。

如果是，那么如何在List的{{1}}中识别ListItem。
我应该更新现有的material-ui。

如果是，那么如何？

实际上是ReactJS的新手。

由于

Answer 1

问题不在于你的逻辑。问题出在您的数据中。您已在代码中指定name.requestKey作为密钥。看一下正在输入组件的数据，你有两个不同的对象在该属性上具有相同的值。

要使用密钥，您需要指定数据中唯一的内容。

如果密钥已存在，则更新List中的ListItem（ReactJS，MaterialUI）

1 个答案: