Apakah maksud "Tidak boleh memusnahkan 'nama' harta 'pengguna sedia ada' kerana ia tidak ditentukan. Update.js:13"?

Question

Saya ingin mengemas kini data pengguna. Saya berjaya mendapatkan data pengguna sedia ada, tetapi tidak dikemas kini. Ralat di atas dipaparkan. Apabila saya mengalih keluar tanda sama dari baris di bawah, ralat akan dialih keluar tetapi data pengguna masih tidak dikemas kini.

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

Saya tidak pasti apakah struktur data anda, tetapi daripada kod yang diberikan saya boleh menerangkan dan meneka apa masalahnya.

Ralat yang anda peroleh bermakna existingUser 的第 0 个元素不存在。由于 existingUser anda datang daripada penapis dan penapis mengembalikan tatasusunan, jadi kami boleh mengandaikan bahawa keadaan di dalam penapis tidak berpuas hati untuk mana-mana elemen.

Apabila anda berkata menambah === 更改为 == akan berjaya, kita boleh mengagak bahawa f.id dan id bukan jenis yang sama. Mungkin satu rentetan dan satu lagi integer.

Menggunakan == sebenarnya menyelesaikan masalah asal anda. Tetapi jika anda ingin menggunakan === anda boleh cuba menukar jenis nilai. Contohnya, jika id ialah rentetan dan f.id ialah integer, anda boleh menulis syarat seperti ini:

f.id === parseInt(id)

Anda boleh mengetahui perbezaannya dengan melakukan carian Google.

Masalah anda yang seterusnya ialah selepas membetulkan ralat di atas, data tidak dikemas kini. Ini kerana corak reka bentuk yang anda gunakan dalam komponen anda. useState hanya mengambil nilai awal dan tidak berubah sepanjang hayat komponen melainkan anda mengemas kininya menggunakan setState .

Memandangkan anda menggunakan useSelector dan dispatch, saya menganggap anda menggunakan redux。在这种情况下，我认为不需要 useState。您只需使用从 existingUser[0] 中解构的名称和电子邮件，只要您发送更新 dan mereka memberikan kod >.