代码之家 › 专栏 › 技术社区 › maaartinus

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

reactjs

maaartinus · 技术社区 · 4 年前

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

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

有人能解释一下原因吗?

0 回复 | 直到 4 年前

Utsav Patel 4 年前

当您通过映射时 names 其是输入值的数组。您将按以下方式呈现输入。

return (
  <div>
    {/***** THE key IS WRONG!!! */}
    {names.map((n, i) => (
      <input key={n} value={n} onChange={(e) => setName(i, e.target.value)} />
    ))}
  </div>
);