Question

类型错误：无法分配给对象‘[object Array]’的只读属性‘x’

2020-11-12

4807

arrays reactjs typescript react-hooks

无论其他 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);
}, [])

无论我按照上面所示进行映射还是使用 for 循环，我最终总是会收到以下错误： TypeError：无法分配给对象“[object Array]”的只读属性“x”

非常感谢任何建议/帮助。提前致谢！

Answer 1

我看到代码是在 React 中使用的，因此最好避免就地修改 users 数组（例如使用 .unshift() 或 .splice() ），因为 React 不会看到差异并且不会重新渲染。

在 React 中，为前一个值创建新值是一种常见的做法。

我认为您可以通过两次过滤 users 数组来实现目标（过滤方法会创建副本而不会影响原始数组）：

id 为 12345 的用户 - 只需要一个并将其存储在 primaryUser 变量中
id 不是 12345 的用户12345

并组合这些数组：

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);
}, [])

谢谢！