使用 useState 成功将元素添加到数组后，map 方法不会渲染新元素

Question

我有一个用 useState 更新的对象数组。我可以在控制台上看到我的数组已成功更新。添加的新元素在那里。但是，当我通过它映射时，将不会显示新元素。任何帮助将不胜感激。这是代码

const Guesslist=()=>{

   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= ()=>{
        
     
      let newList=[...listOfGuesst, guesst];
      
      setListOfGuesst(newList);
      console.log(listOfGuesst);
   
   }

   useEffect(()=>{
       console.log(listOfGuesst)}
       ,[listOfGuesst])

   
  
    return(
    
                    <div>
                        <label htmlFor="">First Name</label>
                          <input type="text" onChange={(e)=>setGuestName(e.target.value)} value={guestName} />
                        <label htmlFor="">Last Name</label>
                          <input type="text" onChange={(e)=>setGuestLastName(e.target.value)} value={guesstLastName} />
                        <label htmlFor="">Email</label>
                          <input type="text" onChange={(e)=>setGuesstEmail(e.target.value)} value={guesstEmail} />
                        
                        <button onClick={addGuest}>
                            add
                        </button>

                         <ul>
                            {listOfGuesst.map(element=>{
            
                                 return   <li key={element.id}>
                                            {element.guesstName}
                                            
                                          </li>
                            })}
                            
                        </ul>  
                    </div>

    )

}
export default Guesslist

Answer 1

错误是你忘记了额外的's'，首先你初始化并输出guesstName，当添加一个新客人时 - guestName.

这里 guesstName :

const initialList = {
   id:1,
   guesstName:'Alan', 
   guesstLastName:'Williams',
   guesstEmail:'alan3@gmail.com'
}
// ...some code

// and here guesstName
<ul>
   {listOfGuesst.map(element=>{
     return <li key={element.id}>{element.guesstName}</li>
   })}
</ul>

添加新客人时 - guestName :

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

使用 useState 成功将元素添加到数组后，map 方法不会渲染新元素

After succesfully addig an element to an array with useState, map method does not render new elements

arrays

reactjs

dictionary

render