变异对象:'(

Question

喂？我想在数据表中显示一组对象。我从我的 redux 中获取我的对象数组并将它们映射以替换状态。但不知何故，我的 redux 也更新了。我尝试了不可变副本Object.assign、[...]。请帮忙。

const convertNumberToJobUnit = (data) => {
    const Agents = Object.assign({}, data)
    return Agents.totalAgents.map(item => {
        switch(item.worker_status) {
        case 1: item.worker_status = 'Үндсэн'
            break
        case 2: item.worker_status = 'Гэрээт'
            break
        default: break
        }
        switch(item.worker_level) {
        case 1:  item.worker_level = 'New Staff'
            break
        case 2:  item.worker_level = 'Normal'
            break
        case 3:  item.worker_level = 'Good'
            break
        case 4:  item.worker_level = 'Very Good'
            break
        default: break
        }
        // item.clickEvent = () => clickEvent(item.device_id)
        item.created_date = dateConvert(item.created_date)
        Agents.jobList.map(jobItem => {
            if(item.job_id === jobItem.id) {
                item.job_id = jobItem.job_name
            }
            return jobItem
        })
        Agents.unitList.map(unitItem => {
            if(item.organizition_unit_id === unitItem.id) {
                item.organizition_unit_id = unitItem.unit_name
            }
            return unitItem
        })
        return item
    })
}

Answer 1

您需要进行深度克隆，而Object.assign 不进行深度克隆。

将此行const Agents = Object.assign({}, data) 替换为const Agents = JSON.parse(JSON.stringify(data))。

For more information

Answer 2

除了@Niraj 的解决方案。使用数组map 时避免改变对象。在地图函数返回值上创建新对象。如下所示，您可以使用find 并更新值而不是映射。希望这可以帮助。

const convertNumberToJobUnit = data => {
  const Agents = Object.assign({}, data);
  return Agents.totalAgents.map(item => {
    let worker_status;
    let worker_level;
    switch (item.worker_status) {
      case 1:
        worker_status = "Үндсэн";
        break;
      case 2:
        worker_status = "Гэрээт";
        break;
      default:
        break;
    }
    switch (item.worker_level) {
      case 1:
        worker_level = "New Staff";
        break;
      case 2:
        worker_level = "Normal";
        break;
      case 3:
        worker_level = "Good";
        break;
      case 4:
        worker_level = "Very Good";
        break;
      default:
        break;
    }

    const job = Agents.jobList.find(jobItem => item.job_id === jobItem.id);
    const unit = Agents.unitList.find(
      unitItem => item.organizition_unit_id === unitItem.id
    );

    return {
      ...item,
      created_date: dateConvert(item.created_date),
      job_id: job ? job.job_name : item.job_id,
      organizition_unit_id: unit ? unit_name : item.organizition_unit_id,
      worker_status,
      worker_level
    };
  });
};