我想更新用戶資料。我成功取得現有用戶數據,但沒有更新。顯示以上錯誤。 當我從下面一行刪除一個等號時,錯誤將被刪除,但用戶資料仍然沒有更新。
const existingUser = users.userList.filter(f => f.id == id);
import React, { useState } from 'react' import { useSelector, useDispatch } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; import { updateUser } from '../redux/slice/userReducer'; const Update = () => { const { id } = useParams(); //console.log(id) const users = useSelector((state) => state.users); const existingUser = users.userList.filter(f => f.id === id); //console.log(existingUser); const { name, email } = existingUser[0]; const [uname, setName] = useState(name); const [uemail, setEmail] = useState(email); const dispatch = useDispatch(); const navigate = useNavigate(); const handleUpdate = (event) => { event.preventDefault(); dispatch(updateUser({ id: id, name: name, email: email })); navigate('/'); } return ( <div className='d-flex w-100 vh-100 justify-content-center align-items-center'> <div className='w-50 border bg-secondary text-white p-5'> <h3>Update User</h3> <form onSubmit={handleUpdate}> <div> <label htmlFor='name'>Name:</label> <input type='text' name='name' className='form-control' placeholder='enter name' value={uname} onChange={e => setName(e.target.value)} /> </div> <div> <label htmlFor='name'>Email:</label> <input type='email' name='email' className='form-control' placeholder='enter email' value={uemail} onChange={e => setEmail(e.target.value)} /> </div> <br /> <button className='btn btn-info'>Update</button> </form> </div> </div> ) } export default Update
我不確定您的資料結構是什麼,但從提供的程式碼我可以解釋並猜測問題是什麼。
您收到的錯誤表示您的
existingUser
的第 0 個元素不存在。由於existingUser
來自過濾器並且過濾器會傳回一個數組,因此我們可以假設過濾器內的條件不滿足任何元素。當您說將
===
更改為==
會使其正常工作時,我們可以猜測 f.id 和 id 不是相同類型。也許一個是字串,另一個是整數。使用 == 實際上解決了您最初的問題。但如果您想使用 === 您可以嘗試變更值的類型。例如,如果 id 是字串,f.id 是整數,則可以這樣寫條件:
您可以透過 Google 搜尋了解它們的差異。
您的下一個問題是,修復上述錯誤後,資料未更新。這是因為您在組件中使用的設計模式。 useState 僅採用一個初始值,並且在整個元件生命週期中不會更改,除非您使用
setState
更新它。由於您正在使用 useSelector 和調度,我假設您正在使用
redux
。在這種情況下,我認為不需要useState
。您只需使用從existingUser[0]
中解構的名稱
和電子郵件
,只要您發送更新
,它們就會呈現程式碼>.