我想更新用户数据。我成功获取现有用户数据,但没有更新。显示以上错误。 当我从下面一行删除一个等号时,错误将被删除,但用户数据仍然没有更新。
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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我不确定您的数据结构是什么,但从提供的代码我可以解释并猜测问题是什么。
您收到的错误意味着您的
existingUser的第 0 个元素不存在。由于existingUser来自过滤器并且过滤器返回一个数组,因此我们可以假设过滤器内的条件不满足任何元素。当您说将
===更改为==会使其正常工作时,我们可以猜测 f.id 和 id 不是同一类型。也许一个是字符串,另一个是整数。使用 == 实际上解决了您最初的问题。但如果您想使用 === 您可以尝试更改值的类型。例如,如果 id 是字符串,f.id 是整数,则可以这样编写条件:
您可以通过 Google 搜索了解它们的差异。
您的下一个问题是,修复上述错误后,数据未更新。这是因为您在组件中使用的设计模式。 useState 仅采用一个初始值,并且在整个组件生命周期中不会更改,除非您使用
setState更新它。由于您正在使用 useSelector 和调度,我假设您正在使用
redux。在这种情况下,我认为不需要useState。您只需使用从existingUser[0]中解构的名称和电子邮件,只要您发送更新,它们就会呈现代码>.