Question

所以我有这个代码：

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

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

然后我正在尝试像这样设置状态：

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

如您所见，在setState方法的个人资料对象中，我包含了 resetElementOnLiveEdit 。

问题是，仅当其不是 NULL 时，才如何像setState方法中那样描述此变量？

因为现在我的状态为：（

Answer 1

首先，您要违反React的主要规则之一：因为state updates are asynchronous，如果要基于现有状态（...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
})

如何在将变量添加为对象属性之前检查变量是否不为null？

2 个答案: