如何在三元运算符中使用&&并执行多个setState操作？

首先直接给结论：可以用&&运算符，同时也能通过逗号运算符实现多个setState的调用，下面具体说几种可行写法，顺便纠正原代码里的不合理之处：

1. 逗号运算符实现（三元分支内执行多操作） #

逗号运算符的特性是依次执行多个表达式，最后返回最后一个表达式的结果，刚好能把多个操作打包成一个表达式放在三元分支里：

const handleEditTask = (id) => {
  tasks.map((x) => {
    // 满足条件时依次调用两个setState，else分支返回null避免生成undefined项
    return x.id === id ? (setTitle(x.title), setNote()) : null;
  });
};

注意：else分支不能留空，必须返回一个值（比如null），否则map生成的数组里会出现undefined项。

2. &&运算符简化写法 #

逻辑与&&的规则是：左侧表达式为真时，才会执行右侧表达式。利用这个特性可以简化条件判断，但要结合逗号运算符打包多操作：

const handleEditTask = (id) => {
  tasks.map((x) => {
    // 条件成立时执行括号内的多操作，不成立时返回false
    return x.id === id && (setTitle(x.title), setNote());
  });
};

单独用&&只能接一个表达式，所以需要逗号运算符把两个setState调用打包成一个整体。

更推荐的写法：用forEach替代map #

原代码里用map却没有使用它返回的新数组，这违背了map的设计初衷——map是用来转换数组的，不是用来执行副作用（比如调用setState）的。更清晰直观的写法是用forEach：

const handleEditTask = (id) => {
  tasks.forEach((x) => {
    if (x.id === id) {
      setTitle(x.title);
      setNote();
    }
  });
};

这种写法不需要纠结三元或&&的表达式限制，代码可读性更高，逻辑意图也更明确。

内容的提问来源于stack exchange，提问作者akash MM