TypeError：無法分配給 object '[object Array]' 的只讀屬性 'x'

Question

我嘗試了很多方法來改變它，不管它是如何在其他 Stack Overflow 帖子上完成/解釋的。 我有一個對象數組，我正在嘗試通過數組映射/循環將其中一個對象移動到數組的前面。

這是我得到的：

const [users, setUsers] = useState<User[]>([]);
const [primaryUser, setPrimaryUser] = useState<User>({
  id: 0;
  first_name: "",
  last_name: ""
})

useEffect(() => {
  users.map((user, i) => {
    if(user.id === 12345) {
      users.splice(i, 1);
      users.unshift(user)

      setPrimaryUser(user);
    }
  });

  setUsers(users);
}, [])

無論我是如上所示的 map 還是使用 for 循環，我總是會收到以下錯誤： TypeError: Cannot assign to read only property 'x' of object '[object Array]'

非常感謝任何建議/幫助。 提前致謝！

Answer 1

我看到代碼在 React 中使用，因此最好避免就地修改users數組（例如使用.unshift()或.splice() ），因為 React 不會看到差異並且不會重新渲染。

在 React 中，為之前的值創造新的價值是很常見的做法。

我認為您可以通過兩次過濾users數組來實現目標（過濾方法創建一個副本而不影響原始數組）：

• ID 為 12345 的用戶 - 只需要一個並將其存儲在primaryUser變量中
• ID 不是 12345 的用戶

並結合這些 arrays：

useEffect(() => {
  const primaryUserID = 12345;
  const [ primaryUser ] = users.filter(user => user.id === primaryUserID)
  setPrimaryUser(primaryUser);

  // Construct array from 'primaryUser' and the rest of users
  const newUsers = [
     primaryUser,
     ...users.filter(user => user.id !== primaryUserID),
  ];
  setUsers(newUsers);
}, [])

Answer 2

多虧了 VLAZ 和 Vitalii（很棒的文章），我才能夠讓它工作。 這是我的解決方案：

useEffect(() => {
  let tempUsers = [...users];

  tempUsers.map((user, i) => {
    if(user.id === 12345) {
      tempUsers.splice(i, 1);
      tempUsers.unshift(user)

      setPrimaryUser(user);
    }
  });

  setUsers(tempUsers);
}, [])

謝謝你！