我想更新用户数据。我成功获取现有用户数据,但没有更新。显示以上错误。 当我从下面一行删除一个等号时,错误将被删除,但用户数据仍然没有更新。
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]
中解构的名称
和电子邮件
,只要您发送更新
,它们就会呈现代码>.