Question

我有一个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”变量。可以使用点差运算符完成此操作吗？

Answer 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: '' },
  }), {})

Answer 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))

Answer 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)

需要知道如何对对象使用散布运算符

3 个答案: