React中State对象为何被修改？求助按user_id合并数组对象问题

嘿，我来帮你搞定这两个React技术问题！

你遇到的State被意外修改的情况，核心原因是React的State设计为不可变值，但你在合并数组的时候直接修改了来自State的原对象（比如用_.assign(item, ...)直接修改users里的item）。因为数组里的对象是引用类型，修改它们会直接篡改原State中的数据，导致意外的状态变更。

解决这个问题的关键是永远不要直接修改State里的对象/数组，而是创建新的副本，常用的方法有：

• 使用ES6扩展运算符创建新对象：{...originalObj, newProp: value}
• 使用Lodash的_.assign时传入空对象作为第一个参数：_.assign({}, originalObj, newProps)
• 使用Immer库简化不可变更新逻辑

先看你写的mergeArray函数，里面有两个小问题：一是直接修改了原item（来自State的users），二是代码没写完（_.find(b, ['user_id', ite...这里应该是item.user_id）。咱们来修正它：

首先，完整的合并函数应该避免修改原State对象，同时正确匹配user_id：

function mergeArray(users, sentInvites) {
  // 遍历users数组，为每个用户匹配对应的邀请记录
  return _.map(users, function(user) {
    // 找到user_id匹配的邀请记录
    const matchedInvite = _.find(sentInvites, ['user_id', user.user_id]);
    // 创建新对象，合并用户信息和邀请信息，不修改原user对象
    return {
      ...user,
      // 如果有匹配的邀请，就把邀请信息加进去，没有就留空或设默认值
      ...(matchedInvite || {})
    };
    // 或者用Lodash的方式：return _.assign({}, user, matchedInvite || {});
  });
}

然后在mapStateToProps里，记得把合并后的结果返回（你原来的代码里只定义了UsersList但没返回），还可以加一些空值判断避免报错：

function mapStateToProps(state) { 
  const { users = [] } = state.users.result || {}; 
  const { invite = {} } = state.invite.result || {}; 
  const { friends = [] } = state.friends.result || {}; 

  let UsersList = users;
  // 先判断所有数据是否存在，避免空值报错
  if (users.length && invite.sent_invites) { 
    UsersList = mergeArray(users, invite.sent_invites); 
  } 

  // 记得返回需要的state映射
  return {
    UsersList,
    friends
  };
}

补充说明：这里给state.users.result等加了默认值（|| {}、|| []），是为了避免当state还没加载完成时出现Cannot destructure property 'users' of undefined的错误。

内容的提问来源于stack exchange，提问作者anderish