“無法解構“現有用戶”的屬性“名稱”，因為它未定義。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] 中解構的名稱和電子郵件，只要您發送更新，它們就會呈現程式碼>.