Question

我有这个工作函数，有条件地setState拥有searchMode属性，但是我必须摆脱嵌套的三元表达式，我该怎么做？

  updateSearchMode = () => {
    this.setState(prevState => ({
      searchMode:
        prevState.contactsInfo.length === 0
          ? searchModes.noResultsPanel
          : prevState.contactsInfo.length === 0 && prevState.searchString
          ? searchModes.advisoryPanels
          : searchModes.resultsPanel,
    }));
  };

Answer 1

一个简化就是您可以删除第二个prevState.contactsInfo.length === 0，因为您已经在开始时就检查了这种情况。

 prevState.contactsInfo.length === 0
      ? searchModes.noResultsPanel : prevState.searchString
      ? searchModes.advisoryPanels
      : searchModes.resultsPanel,

您想要删除?运算符，而不是简单地使用if else语句。

if(prevState.contactsInfo.length === 0){
 ... do whatever you want
} else if(prevState.searchString){
 ... do whatever you want
} else {
... do whatever you want
}

Answer 2

您可以将三元表达式替换为常规if：

updateSearchMode = () => {
  this.setState(prevState => {
    if (!prevState.contactsInfo.length && prevState.searchString)
      return ({searchMode: searchModes.advisoryPanels});
    if (!prevState.contactsInfo.length)
      return ({searchMode: searchModes.noResultsPanel});
    return ({searchMode: searchModes.resultsPanel});
  });
};

请注意，我更改了顺序，因为第2种情况永远无法实现，因为第一种情况始终会首先验证。

Answer 3

简化三元数的最好方法是改为编写if-else。我不确定上述答案是否符合您要尝试完成的逻辑，但这是我要做的：

updateSearchMode = () => {
  this.setState(prevState => {
    if (prevState.contactsInfo.length === 0) {
      if (prevState.searchString)
        return { searchModes: searchModes.advisoryPanels };
      return { searchModes: searchModes.noResultsPanel };
    }
    return { searchModes: searchModes.resultsPanel };
  });
};

您可能需要为此编写一些测试用例，或者为此手动测试所有三个方案。

具有嵌套三元表达式的SetState

3 个答案: