無法實現簡單的可選鏈接

Question

我正在嘗試實現一個簡單的可選鏈接 state 更新。 我想要的是僅在項目已定義/存在時才更改項目； 如果不是/未定義，我希望該項目保留以前的 state（例如，如果未更新，用戶 ID 應保持 = 2）。

為了測試這一點，我創建了一個包含三個變量的 object：

const userObj = {
  firstName: "",
  lastName: "",
  userID: 2,
};

然后我創建了一個 function 來更新 state：

const updateState = (item) => {
  return {
    userObj.firstName = item?.firstName,
    userObj.lastName = item?.lastName,
    userObj.userID = item?.userID,
  };
};

最后，我傳遞了僅包含一個要更新的項目 (firstName) 的項目，我調用了 function：

const item = {
  firstName: "None",
};

console.log(updateState(item));

output：

 userObj.firstName = item?.firstName,
           ^

SyntaxError: Unexpected token '.'

但是當我在 userObj 上輸入userObj時，我可以看到它的屬性：

Answer 1

您會收到此錯誤，因為您要返回的是一個 object，其鍵中有點。

您正在混合分配和 object 創建。 此外item?.firstName僅在item為 null 或未定義的情況下有所幫助，因為您無法訪問null.firstName ，因此它快速失敗而不是引發異常。

對於這種默認值，您必須按照typeof item.firstName === 'string'? item.firstName: userObj.firstName typeof item.firstName === 'string'? item.firstName: userObj.firstName 。

把所有東西放在一起：

const func = (value, fallback) => (
  typeof value === typeof fallback
    ? value
    : fallback
);

const updateState = (item) => {
  userObj.firstName = func(item?.firstName, item.firstName);
  userObj.lastName = func(item?.lastName, item.lastName);
  userObj.userID = func(item?.userID, item.userId);

  return userObj;
};

但是請注意，此 function 將改變userObj 。

編輯： default是一個糟糕的命名選擇。

Answer 2

你可以這樣做，使用 javascript object 解構

const updateState = (item) => {
 return {
   ...userObj,
   ...item,
 };
};

所以它只會更新傳遞的鍵和值，我希望問題不在 typescript

Answer 3

您可以將null 合並與可選鏈接一起使用：

const updateState = item => ({
  userObj.firstName = item?.firstName ?? userObj.firstName ,
  userObj.lastName  = item?.lastName  ?? userObj.lastName  ,
  userObj.userID    = item?.userID    ?? userObj.userId    ,
});

您可以使用擴展運算符：

const updateState = item => {
  userObj = { ...userObj, ...item };
  return userObj;
}

或者你可以使用lodash的defaults() function：

const _ = require('lodash');

const updateState = item => {
  userObj = _.defaults(userObj, item)
  return userObj;
}

或者......如果你真的想改變 state object，而不是創建一個新的並替換它，自己動手，類似：

const updateState = item => {
  for (const key in item ) {
    const hasValue = key != null && key != undefined && key != NaN ;

    if ( hasValue ) {
      userObj[prop] = item[prop];
    }

  }
}

正如他們所說，給貓剝皮的方法不止一種。

Answer 4

因此，要保留舊的 state，您需要為此編寫邏輯。

const updateState = (item) => {
  return {
    userObj.firstName = item?.firstName || userObj.firstName,
    userObj.lastName = item?.lastName || userObj.lastName,
    userObj.userID = item?.userID || userObj.userID,
  };
};

// shorthand should be something like this:
// Creates a new object {}
// merges in userObj
// merges in item
// this will ignore null values but likely keep empty strings

const updateState = (item) => {
  return Object.assign({}, userObj, item);
};