带有＆符号的javascript条件语句仅读取前半部分

Posted 2023-02-22

【中文标题】带有＆符号的javascript条件语句仅读取前半部分

【英文标题】：javascript conditional with ampersand statements only reading first half

【发布时间】：2019-10-04 03:33:18

【问题描述】：

我的条件语句有问题，目前如果selectedItem = null 它将设置setOption = dropdownItems[0].value 但不会设置setPage = 1 和它下面的行相同，有什么反馈吗？

这是我当前的代码

      <button ...getToggleButtonProps()>
              selectedItem === null 
                ? setOption(dropdownItems[0].value) && setPage(1)
                : setOption(selectedItem.value) && setPage(1) 
              `$option`
          <ArrowIcon isOpen=isOpen />
       </button>

【问题讨论】：

setOption() 返回什么？如果它返回 undefined 或 falsy 值，则语句的其余部分将短路。

是否有任何理由 setOption 在每次渲染时执行，而不是在某些事件上执行，例如单击按钮？

当用户在选择要搜索的数据库的不同下拉选项之间切换时，何时选择新数据库，我还希望将页码重置为1 @fleischpflanzerl span>

@MarkMeyer 例如它返回一个字符串'Database A'

【参考方案1】：

为了让&& 执行这两个表达式，第一个必须返回一个真值，否则右侧将不会被执行：

const returnsFalse = () => false;
const returnsTrue = () => true;
const returnsNothing = () => ;

returnsFalse() && console.log("does not work with false");
returnsTrue() && console.log("works with true");
returnsNothing() && console.log("does not work with no return value");

setOptionfunction does not return anything

如果您希望两个表达式都执行而不依赖于它们的返回值，则可以使用逗号运算符：

const returnsFalse = () => false;
const returnsTrue = () => true;
const returnsNothing = () => ;

(returnsFalse(), console.log("works with false"));
(returnsTrue(), console.log("works with true"));
(returnsNothing(), console.log("works with no return value"));

所以，你的代码应该是这样的：

<button ...getToggleButtonProps()>
      selectedItem === null 
        ? setOption(dropdownItems[0].value), setPage(1)
        : setOption(selectedItem.value), setPage(1) 
      `$option`
  <ArrowIcon isOpen=isOpen />
</button>

如果您想在setOption 完成后调用setPage，另一种方法是使用the callback parameter 并将调用setPage(1) 的函数传递给setOption：

<button ...getToggleButtonProps()>
      selectedItem === null 
        ? setOption(dropdownItems[0].value, () => setPage(1))
        : setOption(selectedItem.value, () => setPage(1)) 
      `$option`
  <ArrowIcon isOpen=isOpen />
</button>

【讨论】：

这很有帮助，但是 setOption 返回一个字符串。这就是我初始化const [option, setOption] = React.useState('All'); 的方式，然后根据用户的选择，我想将其设置为“数据库A”或“数据库B”等等

@CatGirl19 it seems like it doesn't return anything。它只会设置值。