如何在将变量null添加为object属性之前检查其是否为空？

Question

所以我有个密码：

let resetElementOnLiveEdit = null
    if(liveEdit){
      if(!profile in liveEdit)
        resetElementOnLiveEdit = {
          [Object.keys(liveEdit)[0]]: liveEdit[Object.keys(liveEdit)[0]]
        }
    }

请注意resetElementOnLiveEdit变量。默认情况下，它是空，那么我就有条件了。

然后我试着设定这样的状态：

this.setState({
      profiles: {
        ...this.state.profiles,
        [profile]: profileCopy,
        resetElementOnLiveEdit
      },
      liveEdit: saveBeforeEdit
    })

如您所见，在配置文件对象中，我在setState方法中包括了setState

问题是，如何像我描述的那样在setState方法中包含这个变量，除非它不是空。

因为现在我有空支柱在状态：

Answer 1

首先，您破坏了主要的反应规则之一:因为状态更新是异步的。，如果您基于现有状态(...this.state.profiles)设置状态，则必须使用setState的回调版本(因此您没有使用陈旧状态)。所以你的代码是：

this.setState(({profiles}) => ({
  profiles: {
    ...profiles,
    [profile]: profileCopy,
    resetElementOnLiveEdit
  },
  liveEdit: saveBeforeEdit
}));

如果你根本不想拥有房产，最好的办法是把它分开：

this.setState(({profiles}) => {
  var newState = {
    profiles: {
      ...profiles,
      [profile]: profileCopy
    },
    liveEdit: saveBeforeEdit
  };
  if (resetElementOnLiveEdit !== null) {
    newState.profiles.resetElementOnLiveEdit = resetElementOnLiveEdit;
  }
  return newState;
});

但是，如果您愿意，您可以扩展一个对象，并选择一个空白的对象或一个具有以下属性的对象：

this.setState(({profiles}) => ({
  profiles: {
    ...profiles,
    [profile]: profileCopy,
    ...(resetElementOnLiveEdit === null ? {} : {resetElementOnLiveEdit})
  },
  liveEdit: saveBeforeEdit
}));

从理论上讲，这意味着你正在创建一个对象，展开它，然后扔掉它。但这不太可能是一条关键的表演之路.

Answer 2

您可以在代码之前创建profiles对象，并且只有在null时才能设置它：

const profiles = { 
  ...this.state.profiles,
  [profile]: profileCopy,
};
if (resetElementOnLiveEdit) {
  profiles.resetElementOnLiveEdit = resetElementOnLiveEdit;
}
this.setState({
  profiles,
  liveEdit: saveBeforeEdit
});

或者，如果你必须在一个班轮中这样做，你可以：

this.setState({
  profiles: {
    ...this.state.profiles,
    [profile]: profileCopy,
    ...(resetElementOnLiveEdit ? { resetElementOnLiveEdit } : {})
  },
  liveEdit: saveBeforeEdit
})