Que signifie « Impossible de déstructurer la propriété « nom » de « utilisateur existant » car elle n'est pas définie. Update.js:13 » ?

Question

Je souhaite mettre à jour les données utilisateur. J'ai réussi à obtenir les données utilisateur existantes, mais non mises à jour. L'erreur ci-dessus s'affiche. Lorsque je supprime le signe égal de la ligne ci-dessous, l'erreur est supprimée mais les données utilisateur ne sont toujours pas mises à jour.

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

Je ne suis pas sûr de la structure de vos données, mais à partir du code fourni, je peux expliquer et deviner quel est le problème.

L'erreur que vous obtenez signifie que votre existingUser 的第 0 个元素不存在。由于 existingUser provient d'un filtre et que le filtre renvoie un tableau, nous pouvons donc supposer que la condition à l'intérieur du filtre n'est satisfaite pour aucun élément.

Quand vous dites que l'ajout de === 更改为 == fera que cela fonctionnera, on peut deviner que f.id et id ne sont pas du même type. Peut-être que l’un est une chaîne et l’autre un entier.

Utiliser == résout réellement votre problème d'origine. Mais si vous souhaitez utiliser === vous pouvez essayer de changer le type de valeur. Par exemple, si id est une chaîne et f.id est un entier, vous pouvez écrire la condition comme ceci :

f.id === parseInt(id)

Vous pouvez découvrir la différence en effectuant une recherche sur Google.

Votre prochain problème est qu'après avoir corrigé l'erreur ci-dessus, les données ne sont pas mises à jour. Cela est dû au modèle de conception que vous utilisez dans votre composant. useState ne prend qu'une valeur initiale et ne change pas tout au long de la durée de vie du composant, sauf si vous le mettez à jour en utilisant setState .

Puisque vous utilisez useSelector et dispatch, je suppose que vous utilisez redux。在这种情况下，我认为不需要 useState。您只需使用从 existingUser[0] 中解构的名称和电子邮件，只要您发送更新 et ils affichent le code >.