После успешного добавления элемента в массив с помощью useState метод map не отображает новые элементы

#arrays #reactjs #dictionary #render

Вопрос:

У меня есть массив объектов, который обновляется с помощью useState. Я вижу на консоли, что мой арай успешно обновлен. Добавлены новые элементы. Однако, когда я сопоставлю его, новые элементы отображаться не будут. Любая помощь будет высоко оценена. Это код

 const Guesslist=()=gt;{   const [guestName, setGuestName]=useState('');  const [guesstLastName, setGuestLastName]=useState('');  const [guesstEmail, setGuesstEmail]= useState('');   const initialList={id:1, guesstName:'Alan', guesstLastName:'Williams',guesstEmail:'alan3@gmail.com'}   const [listOfGuesst, setListOfGuesst]= useState([initialList]);  let guesst={  id:Date.now(),  guestName:guestName,  guesstLastName:guesstLastName,  guesstEmail:guesstEmail }  const addGuest= ()=gt;{      let newList=[...listOfGuesst, guesst];    setListOfGuesst(newList);  console.log(listOfGuesst);    }   useEffect(()=gt;{  console.log(listOfGuesst)}  ,[listOfGuesst])       return(    lt;divgt;  lt;label htmlFor=""gt;First Namelt;/labelgt;  lt;input type="text" onChange={(e)=gt;setGuestName(e.target.value)} value={guestName} /gt;  lt;label htmlFor=""gt;Last Namelt;/labelgt;  lt;input type="text" onChange={(e)=gt;setGuestLastName(e.target.value)} value={guesstLastName} /gt;  lt;label htmlFor=""gt;Emaillt;/labelgt;  lt;input type="text" onChange={(e)=gt;setGuesstEmail(e.target.value)} value={guesstEmail} /gt;    lt;button onClick={addGuest}gt;  add  lt;/buttongt;   lt;ulgt;  {listOfGuesst.map(element=gt;{    return lt;li key={element.id}gt;  {element.guesstName}    lt;/ligt;  })}    lt;/ulgt;   lt;/divgt;   )  } export default Guesslist

1. Ваш код должен работать правильно

2. Это не работает. Я могу отобразить только начальное значение, присвоенное массиву. Действительно, я думаю, что моя проблема связана с асинхронной природой setState, но я не знаю, как это исправить

Ответ №1:

Ошибка в том, что вы забыли о дополнительной букве «s», сначала вы инициализируете и выводите guesstName , а при добавлении нового гостя — guestName .

Здесь guesstName :

 const initialList = {  id:1,  guesstName:'Alan',   guesstLastName:'Williams',  guesstEmail:'alan3@gmail.com' } // ...some code  // and here guesstName lt;ulgt;  {listOfGuesst.map(element=gt;{  return lt;li key={element.id}gt;{element.guesstName}lt;/ligt;  })} lt;/ulgt;

Когда вы добавляете нового гостя — guestName :

 let guesst={  id:Date.now(),  guestName:guestName,  guesstLastName:guesstLastName,  guesstEmail:guesstEmail }