Was bedeutet „Die Eigenschaft ‚Name‘ des ‚vorhandenen Benutzers‘ kann nicht zerstört werden, da sie nicht definiert ist. Update.js:13“?

Question

Ich möchte Benutzerdaten aktualisieren. Ich habe die vorhandenen Benutzerdaten erfolgreich abgerufen, sie wurden jedoch nicht aktualisiert. Der obige Fehler wird angezeigt. Wenn ich ein Gleichheitszeichen aus der Zeile darunter entferne, wird der Fehler behoben, aber die Benutzerdaten werden immer noch nicht aktualisiert.

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] 中解构的名称和电子邮件，只要您发送更新，它们就会呈现代码>.