需要知道如何对对象使用扩展运算符答案

【问题标题】：Need to know how to use the spread operator for an object需要知道如何对对象使用扩展运算符
【发布时间】：2020-02-11 20:09:03
【问题描述】：

我有一个 reactJS 应用程序，想知道是否有更简单的方法可以将我的状态对象分配给从休息返回的数据。也许使用扩展运算符？

state = {
        recordid: "",
        companyname: {val:"",err:""},
        address: {val:"",err:""},
        telephone: {val:[],err:""},
        email: {val:[],err:""},
        taxid: {val:"",err:""},
        weburl: {val:"",err:""},
        loading: true
    }

从服务器返回的数据如下所示：

{
  "address": "9242 Kropf Court\nTulsa, OK 74133", 
  "balance": "1937.2400", 
  "companyname": "HUB Pharmaceuticals, LLC", 
  "email": [
    {
      "emailaddress": "lespinha4r@salon.com", 
      "emailname": "Lizbeth Espinha", 
      "recordid": "ea18a1b3-860d-45ed-a6bc-b5208dcfbac7"
    }
  ], 
  "recordid": "fe435915-0e5c-4165-80ca-28c69a5d1ed8", 
  "taxid": "132798707", 
  "telephone": [
    {
      "phonename": "Office", 
      "phonenumber": "9185499797", 
      "recorder": 1, 
      "recordid": "9fd70f31-b450-465b-aec4-39f47ec6e883"
    }
  ], 
  "weburl": "https://delicious.com"
}

我打算将从 RESTapi 返回的值分配给匹配的状态变量，但在相应的“val”变量中。这可以用扩展运算符来完成吗？

【问题讨论】：

不确定为什么需要映射到 val 和 err 但使用 reduce 和传播运算符它应该可以工作。你想要它像下面的Codesandbox吗？如果没问题，我可以创建一个答案并在代码中添加一些细节。
AWolf，当我可以直接将值分配给状态时，这似乎是一项非常艰巨的工作。我希望有一种捷径可以做到这一点。我不想让你经历麻烦。感谢您的帮助。
@Elcid_91，如果您希望结果与您提供的示例相匹配，AWolf 的 sn-p 与您所期望的一样简洁。
Kevin...完全理解，这是问题的解决方案；但是，没有足够的字段来保证编写额外的代码。 AWolf，如果你想创建一个答案，我会将我的问题打勾为已回答。

标签： javascript reactjs

【解决方案1】：

它并不漂亮，但您可以使用object destructuring 获取您感兴趣的属性：

const parseResponseObject = ({
  recordid,
  companyname,
  address,
  telephone,
  email,
  taxid,
  weburl,
}) => ({
  recordid,
  companyname: { val: companyname, err: '' },
  address: { val: address, err: '' },
  telephone: { val: telephone, err: '' },
  email: { val: email, err: '' },
  taxid: { val: taxid, err: '' },
  weburl: { val: weburl, err: '' },
  loading: true,
})

const response = {
  address: '9242 Kropf Court\nTulsa, OK 74133',
  balance: '1937.2400',
  companyname: 'HUB Pharmaceuticals, LLC',
  email: [
    {
      emailaddress: 'lespinha4r@salon.com',
      emailname: 'Lizbeth Espinha',
      recordid: 'ea18a1b3-860d-45ed-a6bc-b5208dcfbac7',
    },
  ],
  recordid: 'fe435915-0e5c-4165-80ca-28c69a5d1ed8',
  taxid: '132798707',
  telephone: [
    {
      phonename: 'Office',
      phonenumber: '9185499797',
      recorder: 1,
      recordid: '9fd70f31-b450-465b-aec4-39f47ec6e883',
    },
  ],
  weburl: 'https://delicious.com',
}

const result = parseResponseObject(response)

console.log(result)

或者，您可以将Object.entries() 与Array.prototype.reduce() 一起使用。但这会将每个属性转换为 { val, err } 格式，看起来您没有对 recordid 属性执行此操作并删除了 balance 属性。

const parseResponseObject = response =>
  Object.entries(response).reduce((obj, [k, v]) => ({
    ...obj,
    [k]: { val: v, err: '' },
  }), {})

【讨论】：

【解决方案2】：

这有帮助吗？

const data = {
    "address": "9242 Kropf Court\nTulsa, OK 74133",
    "balance": "1937.2400",
    "companyname": "HUB Pharmaceuticals, LLC",
    "email": [{
        "emailaddress": "lespinha4r@salon.com",
        "emailname": "Lizbeth Espinha",
        "recordid": "ea18a1b3-860d-45ed-a6bc-b5208dcfbac7"
    }],
    "recordid": "fe435915-0e5c-4165-80ca-28c69a5d1ed8",
    "taxid": "132798707",
    "telephone": [{
        "phonename": "Office",
        "phonenumber": "9185499797",
        "recorder": 1,
        "recordid": "9fd70f31-b450-465b-aec4-39f47ec6e883"
    }],
    "weburl": "https://delicious.com"
}

const state = {
    recordid: "",
    companyname: { val: "", err: "" },
    address: { val: "", err: "" },
    telephone: { val: [], err: "" },
    email: { val: [], err: "" },
    taxid: { val: "", err: "" },
    weburl: { val: "", err: "" },
    loading: true
}

const result = (d,state)=>({
    ...state,
    ...Object.entries(d).reduce((p,[k,val])=>(p[k] = ({
        val,
        err: ''
    }), p), {})
})

console.log(result(data, state))

【讨论】：

【解决方案3】：

state = {
      recordid: "",
      companyname: {val:"",err:""},
      address: {val:"",err:""},
      telephone: {val:[],err:""},
      email: {val:[],err:""},
      taxid: {val:"",err:""},
      weburl: {val:"",err:""},
      loading: true
}
    
const response = {
  "address": "9242 Kropf Court\nTulsa, OK 74133", 
  "balance": "1937.2400", 
  "companyname": "HUB Pharmaceuticals, LLC", 
  "email": [
    {
      "emailaddress": "lespinha4r@salon.com", 
      "emailname": "Lizbeth Espinha", 
      "recordid": "ea18a1b3-860d-45ed-a6bc-b5208dcfbac7"
    }
  ], 
  "recordid": "fe435915-0e5c-4165-80ca-28c69a5d1ed8", 
  "taxid": "132798707", 
  "telephone": [
    {
      "phonename": "Office", 
      "phonenumber": "9185499797", 
      "recorder": 1, 
      "recordid": "9fd70f31-b450-465b-aec4-39f47ec6e883"
    }
  ], 
  "weburl": "https://delicious.com"
}

for(let key of Object.keys(state)) {
  if(typeof(response[key]) !== "undefined") {
    if(typeof(state[key]) === "object") {
      state[key].val = response[key];
    } else {
      state[key] = response[key];
    }
  }
}

console.log(state)

【讨论】：