“无法解构“现有用户”的属性“名称”，因为它未定义。Update.js:13”是什么意思？

Question

我想更新用户数据。我成功获取现有用户数据，但没有更新。显示以上错误。 当我从下面一行删除一个等号时，错误将被删除，但用户数据仍然没有更新。

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

Answer 1

我不确定您的数据结构是什么，但从提供的代码我可以解释并猜测问题是什么。

您收到的错误意味着您的 existingUser 的第 0 个元素不存在。由于 existingUser 来自过滤器并且过滤器返回一个数组，因此我们可以假设过滤器内的条件不满足任何元素。

当您说将 === 更改为 == 会使其正常工作时，我们可以猜测 f.id 和 id 不是同一类型。也许一个是字符串，另一个是整数。

使用 == 实际上解决了您最初的问题。但如果您想使用 === 您可以尝试更改值的类型。例如，如果 id 是字符串，f.id 是整数，则可以这样编写条件：

f.id === parseInt(id)

您可以通过 Google 搜索了解它们的差异。

您的下一个问题是，修复上述错误后，数据未更新。这是因为您在组件中使用的设计模式。 useState 仅采用一个初始值，并且在整个组件生命周期中不会更改，除非您使用 setState 更新它。

由于您正在使用 useSelector 和调度，我假设您正在使用 redux。在这种情况下，我认为不需要 useState。您只需使用从 existingUser[0] 中解构的名称和电子邮件，只要您发送更新，它们就会呈现代码>.