Javascript 对整数列表的键进行反应

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

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

render（）{
常量值=this.props.unonquencenumbers.map（（数字，索引）=>
{number}
);
返回(
{values}
);
}

我更喜欢这样：

new Date().getTime()

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

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

{number}

编辑：

如果数组值得到更新，则更新后的列表将重新呈现

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

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

const values=this.props.unonquenumbers.map（（数字，索引）=>
{number}
);

我更喜欢这样：

new Date().getTime()

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

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

{number}

编辑：

如果数组值得到更新，则更新后的列表将重新呈现

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

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

const values=this.props.unonquenumbers.map（（数字，索引）=>
{number}
);

我尝试使用map方法，将map索引作为键，但由于数组索引没有更改，因此不会渲染新值

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

使用数组索引应该可以很好地工作，因为该键用于帮助优化渲染过程中的渲染，而不是从重新渲染中排除现有项

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

我尝试使用map方法，将map索引作为键，但由于数组索引没有更改，因此不会渲染新值

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

使用数组索引应该可以很好地工作，因为该键用于帮助优化渲染过程中的渲染，而不是从重新渲染中排除现有项

---

如果您没有更一致的键可供使用，甚至在最后一种情况下也可以使用该键。

正如我已经评论过的，该键是给定对象的唯一表示形式（值输入）。您的数组只有数字，没有唯一的键，因此我认为索引和数字的组合是合适的键

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

{number}

---

PS:this

{index+number}

显然不是一个好键，因为0+5=5=2+3

正如我已经注释的那样，该键是给定对象（值项）的唯一表示形式。您的数组只有数字，没有唯一的键，因此我认为索引和数字的组合是合适的键

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

{number}

---

---

PS:this

{index+number}

显然不是一个好键，因为0+5=5=2+3

使用index+number的组合怎么样<代码>{number}

Math.random（）

？@JamesDonnelly但不能有重复的键吗？@dimitri-l的答案是work@AndrewLi

number+Math.random（）

？；）使用索引+数字的组合怎么样<代码>{number}

Math.random（）

？@JamesDonnelly但不能有重复的键吗？@dimitri-l的答案是work@AndrewLi

number+Math.random（）

？；）无论如何，“几乎总是”独一无二。它最终会循环，只是周期很长。但是，如果您希望某些键保持不变以避免重新渲染，则这是一个问题。@PedroCastilho在React中，键应始终是唯一的。抱歉，我不清楚，我的意思是，如果您希望在更新视图时保持键不变以避免不必要的重新渲染。@PedroCastilho更正。但在本例中，我们在render方法内部执行此操作，因此视图正在更新。@Ved@PedroCastilho使用

Math.random（）

或

new Date（）。getTime（）

比使用键索引更糟糕

Math.random（）

或

new Date（）。getTime（）

将始终生成一个新密钥。但是每次安装组件时，给定元素的情况都会有所不同，这会导致巨大的性能开销。根据文档，

键有助于识别哪些项目已更改、已添加或已删除。

无论如何，“几乎总是”唯一。它最终会循环，只是周期很长。但是，如果您希望某些键保持不变以避免重新渲染，则这是一个问题。@PedroCastilho在React中，键应始终是唯一的。抱歉，我不清楚，我的意思是，如果您希望在更新视图时保持键不变以避免不必要的重新渲染。@PedroCastilho更正。但在本例中，我们在render方法内部执行此操作，因此视图正在更新。@Ved@PedroCastilho使用

Math.random（）

或

new Date（）。getTime（）

比使用键索引更糟糕

Math.random（）

或

new Date（）。getTime（）

将始终生成一个新密钥。但是每次安装组件时，给定元素的情况都会有所不同，这会导致巨大的性能开销。根据文档，

键有助于识别哪些项目已更改、已添加或已删除。

谢谢Michael，但它不起作用。这些数字没有更新检查。当只使用索引作为键时，它肯定会更改输出。如果它在您的代码中不起作用，我建议还有另一个问题，并且道具在您的组件中没有实际更改。@user1116377我也提到过，只是为了确保它不是一个奇怪的道具对状态的东西（或其他东西）。谢谢Michael，但它不起作用。这些数字没有更新检查。当只使用索引作为键时，它肯定会更改输出。如果它在代码中不起作用，我建议还有另一个问题，并且组件中的道具实际上没有改变。@user1116377我也提到过，只是为了确保它不是奇怪的道具vs.状态（或其他东西）。