时间戳

首页 > 解决方案 > index.js:1 警告：遇到两个具有相同键的孩子，`index`。索引是唯一的

javascript - index.js:1 警告：遇到两个具有相同键的孩子，`index`。索引是唯一的

问题描述

我正在尝试将索引分配给动态列表组件的键，但它会发出重复键的警告。这是下面的代码

function App() {
  const [userInput, setUserInput] = useState('');

  let calcLengthHandler = (event)=>{
    setUserInput(event.target.value);
  }

  let charArr = [...userInput.split('')];
  let charCmp = ( <div>
        {
          charArr.map((character,index)=>{
            return (
              <CharComponent onClick={deleteCharCmp} char={character} key='index'></CharComponent>
            )
          })
        }
    </div>)

  return (
    <div className="App">
      <div className='container'>
        <h1 className='container-output'>Dynamic List</h1>
        <input type='text' className='user-input' onChange={calcLengthHandler} value={userInput} placeholder='Enter user input'></input>
        <p className='container-output inline'>Length of user input: {userInput.length}</p>
        <ValidationComponent length={userInput.length}></ValidationComponent>
        {charCmp}
      </div>
    </div>
  );
}

每次用户输入一些字符串时，我都会尝试为每个字符创建一个组件。我还有更多功能要实现，但我没有包括在内。在 .map 函数之前添加调试器时，我看到它被调用了两次，这可能是导致问题的原因。我猜 1. 当组件初始化时和 2. 当我调用 {charCmp} 时。如何在这里解决重复键问题？

标签： javascriptreactjs

解决方案

这将key属性设置为字符串'index'：

key='index'

这key会将属性设置为index变量的值：

key={index}

推荐阅读