Hasil yang ingin saya capai adalah:

Jika nama yang dimasukkan sudah ada di larik "orang", tampilkan peringatan "Nama sudah ada".

Kode tidak berfungsi, karena saya terus menerima pesan peringatan setiap saat. Saya pikir variabel perbandingan kondisi (personObject.name ) salah.

Dapatkah seseorang menjelaskan bagaimana ini harus dilakukan?

Tanpa syarat, nama iklan ditambahkan dengan benar ke dalam array.

//Condition
 if (persons.map((person) => person.name === personObject.name) )
 {
    alert("Name already exist");
   
 }
    else
    {
    
    //*/

    setPersons(persons.concat(personObject))
    setNewName('')
  console.log(persons) 
}

Kotak pasir kode Kode lengkap:

const App = () => {
  //Reminder: current state, function that updates it, initial state.
  const [persons, setPersons] = useState([
    //The array persons is empty at start
  ]);
  const [newName, setNewName] = useState('');

  //adding new persons

  const addPerson = (event) => {
    event.preventDefault();
    /* complete the addPerson function for creating new persons */
    const personObject = {
      name: newName,

      id: persons.length + 1,
    };

    //Condition
    if (persons.map((person) => person.name === personObject.name)) {
      alert('Name already exist');
    } else {
      //*/

      setPersons(persons.concat(personObject));
      setNewName('');
      console.log(persons);
    }
  };

  const handlePersonChange = (event) => {
    console.log(event.target.value);
    setNewName(event.target.value);
  };

  return (
    <div>
      <h2>Phonebook</h2>

      <form onSubmit={addPerson}>
        <div>
          name:
          <input value={newName} onChange={handlePersonChange} />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h2>Numbers</h2>

      {console.log(persons)}
      <ul>
        {persons.map((person) => (
          <li key={person.id}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;
0
Lahey Corey 18 Mei 2021, 14:00

2 jawaban

Jawaban Terbaik

Anda memeriksa kondisi dengan menggunakan map dan map akan mengembalikan array baru jadi jika kondisinya akan selalu benar.

Jadi alih-alih peta Anda harus menggunakan some seperti di bawah ini: -

persons.some((person) => person.name === personObject.name);
2
Mario Petrovic 18 Mei 2021, 11:11

Anda dapat menggunakan metode filter yang memfilter array dan mengembalikan Anda array dengan item yang cocok dengan kondisi, jika array baru ini kosong, artinya tidak ada item yang cocok dengannya:

let alreadyExists = persons.filter(person => person.name === personObject.name)

if (alreadyExists.length > 0) {
  alert("Name already exist")
} else {
  setPersons(persons.concat(personObject))
  setNewName('')
  console.log(persons) 
}
0
Marc Charpentier 18 Mei 2021, 11:14