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);
}