Почему моя страница не обновляется при добавлении элемента в мой массив при использовании React

Я работаю над базовым приложением для реагирования, в котором я использую форму для отправки имени человека, после чего оно будет отображаться на экране. После ввода имени массив корректно обновляется, но на экране ничего не меняется. Это то, что я использую, чтобы показать имя человека. В этом случае у меня есть useState для людей, поэтому я подумал, что он должен обновляться. Я все еще новичок в React, поэтому любая помощь приветствуется. заранее спасибо

{persons.map(person =>
    <div key={person}>{person.name}</div>
}

Редактировать:

const [persons, setPersons] = useState([
     { name: 'Arto Hellas' }
]) 
const [newName, setNewName] = useState('')

const addPerson = (event) => {
     event.preventDefault()
     setPersons(persons.concat(newName))
     setNewName('')
}

Можете ли вы показать, где вы устанавливаете функцию человека и код состояния?

Abbas Hussain 10.04.2022 03:20

Я добавил это в пост.

jubskiko 10.04.2022 03:23

Отвечает ли это на ваш вопрос? Почему useState не запускает повторный рендеринг?

ray hatfield 10.04.2022 03:33

Можем ли мы узнать, когда/как вызывается метод addPerson? Кроме того, когда он вызывается, что будет присутствовать в event и какое будет текущее значение в newName? Массив concat берет массив (или более) и объединяет его с существующим (неизменяемо). В строке: persons.concat(newName) видно, что persons является массивом, однако я не вижу, является ли newName тоже массивом. Может быть, я что-то упускаю.

jsN00b 10.04.2022 03:36

Ваша проблема, скорее всего, связана с newName, вы должны нажимать объект, а не строку: {name: newName}. Таким образом, проблема не в concat, а в том, что вы добавляете: поэтому использование .concat({name: newName}) должно работать нормально. Возможно, дважды проверьте учебник, которому вы следуете, чтобы увидеть, что они добавляют по сравнению с тем, что вы добавляете в свой массив.

Nick Parsons 10.04.2022 03:45
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
5
39
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

К сожалению, React не считает, что вы изменили состояние при использовании таких функций массива. Обычно рекомендуется использовать обратный вызов в вашем вызове setState, например:

const addPerson = (e) => {
    e.preventDefault();
    setPersons((prevPersons) => [...prevPersons, { name: newName }]);
    setNewName('');
}

А, спасибо, я этого не знал

jubskiko 10.04.2022 03:42
.concat() возвращает новый массив, поэтому реакция должна увидеть изменение этого состояния. Проблема, скорее всего, связана с тем, что newName является строкой, а не объектом, но мы не знаем этого наверняка, поскольку OP не показал нам, что в этом
Nick Parsons 10.04.2022 03:43

Это было просто имя, я обычно не использую методы массива, такие как .concat(), поэтому я, вероятно, использовал его неправильно.

jubskiko 10.04.2022 03:45
Ответ принят как подходящий
const [persons, setPersons] = useState([
     { name: 'Arto Hellas' }
]) 
const [newName, setNewName] = useState('')

const addPerson = (event) => {
     event.preventDefault()
     setPersons([...persons,{name:newName}])
     setNewName('')
}

Спасибо, я изменил это на это, и теперь это работает. В том, за чем я следил, они сделали это так, как я изначально, поэтому у них, должно быть, были какие-то другие вещи.

jubskiko 10.04.2022 03:43

Обычно это работает, но будьте осторожны при непосредственном использовании состояния. Если эта функция вызывается во второй раз до завершения первого setState, она будет использовать старое состояние, и ваше состояние не изменится, как вы ожидаете. Вот где преимущество использования обратного вызова в setState полезно. Он всегда будет использовать новейшее доступное состояние.

Willey Ohana 10.04.2022 03:46

Другие вопросы по теме