React.js 組件中的多個 if 語句

Question

我正在研究我的投資組合，我遇到了這個問題。 該組件獲取任務（數組）和 sortBy（'all'、'true' 或 'false'）。 問題是，即使我傳遞了 sortBy 的“所有”值，第二個 if 語句也會被調用。

const TaskListTable = ({ tasks, sortBy }) => {
  let filteredTasks;
  let sortByBoolean;
  if (sortBy === 'all') {
    filteredTasks = tasks;
  }
  if (sortBy === 'true' || 'false') {
    sortByBoolean = sortBy === 'true';
    filteredTasks = tasks.filter((task) => task.completed === sortByBoolean);
  }
  console.log(sortBy);
  console.log(sortByBoolean);
  console.log(filteredTasks);

  const withTasks = (
    <div className='task-table'>
      <UtilButton purpose='add' pushUrl='/task-add' />
      <div className='task-table-head'>
        <div>Date</div>
        <div>Task</div>
        <div>Status</div>
        <div></div>
      </div>
      {filteredTasks.map(({ _id, ...others }) => (
        <TaskList key={_id} id={_id} {...others} />
      ))}
    </div>
  );
  const withoutTasks = <UtilPage purpose='emptyData' />;

  return <Fragment>{tasks.length > 0 ? withTasks : withoutTasks}</Fragment>;
};

我用下面的代碼解決了這個問題，而不是使用 2 個 if 語句。 但我仍然想知道為什么上面帶有 2 個 if 語句的代碼不起作用。

const sortByBoolean = sortBy === 'true';
const filteredTasks = sortBy !== 'all' ? tasks.filter((task) => task.completed === sortByBoolean) : tasks;

先感謝您

Answer 1

這部分...

if (sortBy === 'true' || 'false') {
  //...
}

...應該...

if (sortBy === 'true' || sortBy === 'false') {
  //...
}

如果sortBy等於'false' ，您沒有檢查條件，但您檢查了值'false'本身。 這將返回true因為字符串'false'是真實的。
所以目前你的兩個 if 語句都是真的並且被執行。

Answer 2

如果您連續編寫兩個If statements ，那么它肯定會同時執行這兩個。 這是If statement的行為。

所以你可以用if else if method ，也寫|| 單獨聲明來解決這個問題。

   if (sortBy === 'all') {
    filteredTasks = tasks;
  }
  else if (sortBy === 'true' || sortBy === 'false') {
    sortByBoolean = sortBy === 'true';
    filteredTasks = tasks.filter((task) => task.completed === sortByBoolean);
  }

Answer 3

因為您的 if 條件與預期不符，因為如果通過了第一個，則兩個 if 都將被執行以跳過第二個添加 else

if (sortBy === 'all') {
  filteredTasks = tasks;
} else if (sortBy === 'true' || sortBy === 'false') {
  sortByBoolean = sortBy === 'true';
  filteredTasks = tasks.filter((task) => task.completed === sortByBoolean);
}