Saya mencoba menetapkan indeks ke kunci komponen daftar dinamis tetapi memberikan peringatan kunci duplikat. Berikut adalah kode di bawah ini

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>
  );
}

Setiap kali pengguna memasukkan beberapa string, saya mencoba membuat komponen dengan setiap karakter. Saya memiliki fungsionalitas lebih lanjut untuk mencapai yang belum saya sertakan. Saat menambahkan debugger tepat sebelum fungsi .map, saya melihatnya dipanggil dua kali yang mungkin menyebabkan masalah. Saya kira 1. ketika komponen diinisialisasi dan 2. ketika saya memanggil {charCmp}. Bagaimana saya bisa menyelesaikan masalah kunci duplikat di sini?

1
Shambhawi Kumari 29 Mei 2020, 01:28

1 menjawab

Jawaban Terbaik

Ini menetapkan atribut key ke string 'index':

key='index'

Ini menetapkan atribut key ke nilai variabel index:

key={index}
2
simmer 28 Mei 2020, 22:33