Question

我正在尝试渲染一个非唯一整数的固定大小数组。该列表有时会因用户交互而改变。我应该使用哪些钥匙？我尝试使用map方法将map索引作为键，但由于数组索引未更改，因此不会呈现新值。

$(document).ready(function () {
$("#form").validate({
    rules: {
        "name": {
            required: true,
            minlength: 5
        },
        "email": {
            required: true,
            email: true
        }
    },
    messages: {
        "name": {
            required: "Please, enter a name"
        },
        "email": {
            required: "Please, enter an email",
            email: "Email is invalid"
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

Answer 1

正如我已经评论过的那样，密钥是给定对象（值条目）的唯一表示。您的数组只有数字而没有唯一键，所以索引和数字的组合在我看来是合适的键

<div key={index + '_' + number}>{number}</div>

PS：这个{index + number}显然不是一个好钥匙，因为0 + 5 = 5 = 2 + 3

Answer 2

我更喜欢这个：

new Date().getTime()

它将以毫秒为单位返回当前日期时间，并且始终是唯一的。

<div key={"index_"+index+new Date().getTime()}>{number}</div>

编辑：

如果数组值更新，则重新生成的列表将重新呈现。

const values = this.props.nonUniqueNumbers.map((number, index) =>
        <div key={index+number}>{number}</div>
    );

Answer 3

我尝试使用map方法将map index作为键，但由于数组索引未更改，因此不会呈现新值。

使用数组的索引应该可以正常工作，因为密钥用于帮助优化reconciliation of the virtual DOM期间的呈现，而不是从重新呈现中排除现有项目。

如果您没有更一致的密钥可供使用，它甚至可以作为最后的React documentation。

对整数列表的反应键

3 个答案: