Question

我正在创建一个列表GUI，可以通过拖放重新排列。数据来自现有API，作为对象数组，例如：

var dataFromApi = [
    {name: 'jack', label: 'Test element'},
    {name: 'john', label: 'Test element 2'}
];

每个对象还有更多属性，但任何对象都没有唯一的ID字段。数据的性质意味着允许重复的对象。

我使用React类将它们呈现为列表：

var List = React.createClass({
    getDefaultProps: function() {
        return {
            data: []
        };
    },
    getInitialState: function() {
        return {
            data: this.props.data
        };
    },
    render: function() {
        return (
            <ul>
            {
                this.state.data.map(function(item, idx) {
                    return (
                        <li>{item.name}</li>
                    );
                })
            }
            </ul>
        );
    }
});

我尝试添加一些拖放代码，以允许重新排序列表并相应地更新状态。但是，要重新排序，我需要每个<li key={something?}>元素都有一个唯一的键属性不是索引。

为每个元素添加唯一键的最佳方法是什么，但是如果我需要将更改发送到父元素， not 在数据中有此键 - 例如用于保存数据到服务器。

Answer 1

尝试两者兼顾，<li key=idx+item>认为可以解决您的问题

Answer 2

尝试了几乎所有内容，将键设置为项属性和索引的组合，但如果我想允许重新安排子元素，似乎没有任何工作。

最后，我在API调用之后为每个对象生成了一个随机密钥，该调用工作并允许重新安排项目。

ReactJS为可诉诸的列表元素设置唯一键

2 个答案: