TypeError：无法分配给对象“[object Array]”的只读属性“x”答案

【问题标题】：TypeError: Cannot assign to read only property 'x' of object '[object Array]'TypeError：无法分配给对象“[object Array]”的只读属性“x”
【发布时间】：2020-11-12 21:33:24
【问题描述】：

我尝试了很多方式来改变这一点，无论它是如何完成/在其他 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: Cannot assign to read only property 'x' of object '[object Array]'

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

【问题讨论】：

if(user.id = 12345)this is assignment, not equality。此外，您可能应该避免通过.splice() 和.unshift() 改变users。另外，作为旁注，请不要将.map 用作简单的迭代。如果您不进行映射操作，请使用.forEach 或简单的循环。
谢谢，我复制错了。我将其命名为if(user.id === 12345) {。另外，我尝试了forEach 和for 循环。每次仍然出现相同的错误。
那么问题在于改变数组。你永远不应该直接用 React 改变状态，这正是你遇到的问题。
我什至尝试过复制状态 - let tempUsers = users，对其进行变异，设置它 - setUsers(tempUsers)，但还是一样。
let tempUsers = users 将不会复制数组！ Copy array by value

标签： arrays reactjs typescript react-hooks

【解决方案1】：

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

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

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

ID 为 12345 的用户 - 只需要一个并将其存储在 primaryUser 变量中
ID 不是 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);
}, [])

【讨论】：

这是一篇关于 JS 数组方法的好文章，它使用很好的例子解释了 filter/map/reduce telerik.com/blogs/…

【解决方案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);
}, [])

谢谢！

【讨论】：