了解使用不良反应密钥的后果

最近,我犯了一个小错误,对键使用数组值而不是索引,如下所示:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function NamesView(props: {names: string[], setNames(l: string[]) : void}) {
    const {names, setNames} = props;
    function setName(index: number, name: string) {
        setNames(names.map((n, i) => i===index ? name : names[i]));
    }
    return <div>
        {/***** THE key IS WRONG!!! */ }
        {names.map((n, i) => <input key={n} value={n} onChange={e => setName(i, e.target.value)}/>)}
    </div>;
}

function MainView() {
    const [names, setNames] = useState(() => ['one', 'two']);
    return <NamesView names={names} setNames={setNames}/>
}

ReactDOM.render(<MainView/>, document.getElementById('root'));

在这里,使用 key={i} 那就对了。我不明白的是错误代码的行为:每个输入只能编辑一次。你可以添加或删除一个字符或粘贴一些东西,它就会起作用,但所有后续的更改都会被忽略——直到你改变焦点。

有人能解释一下原因吗?