三元上沒有未使用的表達式

Question

在這里，我有一個錯誤說：

預期分配或 function 調用，而是看到一個表達式 no-unused-expressions

我想要 onClick 把我的 const 句柄用三元完成。 我認為這只是 {} 或 () 的問題，我做了很多事情，但我總是收到此錯誤消息。

const Filters = ({ listTask, setListTask, filters, setFilters }) => {
     const [completed, setCompleted] = useState(false);      

     const handleCompleted = () => {
         const newFilters = { ...filters };
         {
          completed
            ? (setCompleted(false),
              (newFilters.status.completed = ""),
              setFilters(newFilters))
            : (setCompleted(true),
              (newFilters.status.completed = "Completed"),
              setFilters(newFilters));
         }
        };

       return(...);
};

Answer 1

我很確定，這與奇怪的三元結構有關。 這可能只是 ESLint 中的一個錯誤。

但是：應該使用三元運算符有條件地為變量賦值。

盡管它可以用作if ()的替代品，但不應該那樣使用它。

原因很簡單：它不可讀並且容易產生難以調試的不良副作用。 只是永遠不要使用三元組來代替if () 。

試試這個。 我認為您會發現它更具可讀性。

const Filters = ({ listTask, setListTask, filters, setFilters }) => {
  const [completed, setCompleted] = useState(false);
  const handleCompleted = () => {
    const newFilters = { ...filters };
    // this is how you should use ternaries:
    newFilters.status.completed = completed ? '' : 'Completed'
    setCompleted(!completed)
    setFilters(newFilters)
  };

  return(...);
};

Answer 2

有一些冗余邏輯（ setFilters(newFilters)兩次），此外，您只制作了filters的淺表副本（ {...filters} ），因此您改變了 state （ newFilters.status.completed =... ）。

我會將其重寫為：

const Filters = ({ listTask, setListTask, filters, setFilters }) => {
  const [completed, setCompleted] = React.useState(false);

  const handleCompleted = () => {
    setFilters((filters) => ({
      ...filters,
      status: { ...filters.status, completed: completed ? "" : "Completed" }
    }
    ));
    setCompleted(prev => !prev);
  };

  return <>...</>;
};