Почему не отображается первый state?

Question

import React, { useState } from 'react'
import Name from "./components/Name";

const App = () => {
  const [ persons, setPersons ] = useState([
    { name: 'Arto Hellas' } // должно отображаться при выводе на экран
  ])
  const [ newName, setNewName ] = useState('')

  const addName = (event) => {
    event.preventDefault()
    const nameObject = {
      content: newName,
      id: persons.length + 1,
    }

    setPersons(persons.concat(nameObject))
    setNewName('')
  }

  const handleNameChange = (event) => {
    setNewName(event.target.value)
  }

  return (
      <div>
          <h2>Phonebook</h2>
        <form onSubmit={addName}>
          name :
            <input
              value={newName}
              onChange={handleNameChange}
            />
            <button type="submit">add</button>
        </form>
        <h2>Numbers</h2>
          {persons.map((name, i) =>
              <Name key={i} name={name} /> // тут попытка отобразить все на экран
          )}
      </div>
  )
}

export default App

Answer 1

Когда вы пишете persons.map, значения persons перебираются по очереди. Что такое persons в вашем случае? Это массив объектов - [{name: 'Arto Hellas'}, {name: 'Второе имя'}, {name: 'Третье имя'}, ...]. Когда я пишу (как в коде ниже, который работает) persons.map((element, i) =>, то element это перебираемый в текущий момент элемент массива persons. А что у нас - элемент массива persons? В нашем случае это объект с ключом name, по которому можно получить его значение. Вот мы и пишем element.name, получая значение name в текущий момент перебираемого объекта.

Перечитайте несколько раз. Поначалу, в массивы и циклы въехать достаточно сложно. Но осознание принципов, как этот, развивает мозги, и не сомневайтесь, если будете практиковать, будете щелкать как орешки такие моменты.

Удачи в обучении!

import React, { useState } from 'react'
import Name from "./components/Name";

const App = () => {
  const [ persons, setPersons ] = useState([
    { name: 'Arto Hellas' } // должно отображаться при выводе на экран
  ])
  const [ newName, setNewName ] = useState('')

  const addName = (event) => {
    event.preventDefault()
    const nameObject = {
      content: newName,
      id: persons.length + 1,
    }

    setPersons(persons.concat(nameObject))
    setNewName('')
  }

  return (
      <div>
          <h2>Phonebook</h2>
        <form onSubmit={addName}>
          name :
            <input
              value={newName}
              onChange={(event) => setNewName(event.target.value)}
            />
            <button type="submit">add</button>
        </form>
        <h2>Numbers</h2>
          {persons.map((element, i) =>
              <Name key={i} name={element.name} />
          )}
      </div>
  )
}

export default App

БЛОГ НА HUSL

Почему не отображается первый state?

Ответы (1 шт):