在 React 中构建待办事项应用程序，使用过滤器但需要一种方法来确保 "complete" 按钮仅删除一个任务而不是两个

Question

我是 React 的新手，所以我按照本教程 https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components 创建了一个待办事项应用程序，然后对其进行了调整以适应我正在从事的项目的要求。一切都按应有的方式工作，除了当我从关联端删除（完成）东西时，它也会从我的主端删除它。我了解为什么会发生这种情况的一般概念（我的代码中没有两个单独的列表），只是不确定如何在不删除现有过滤器的情况下修复它。我曾尝试为这些任务实现一个单独的列表，但只是不了解如何去做。

为更多上下文添加了 CodeSandBox：https://codesandbox.io/s/hungry-sky-5f482?file=/src/index.js 检查任务项目，然后查看您在“显示关联任务”中检查过的项目。问题是在关联端完成一项任务，同时也在“显示所有任务”端完成它。

App.js

const FILTER_MAP = {
  All: () => true,
  Associate: task => task.checked 
};
const FILTER_NAMES = Object.keys(FILTER_MAP);

function App(props) {

  const [tasks, setTasks] = useState(props.tasks);
  const [filter, setFilter] = useState('All');

  function toggleTaskChecked(id) {
    const updatedTasks = tasks.map(task => {
      if (id === task.id) {
        return {...task, checked: !task.checked}
      }
      return task;
    });
    setTasks(updatedTasks);
  }

  function completeTask(id) {
    const remainingTasks = tasks.filter(task => id !== task.id);
    setTasks(remainingTasks);
  }

  const taskList = tasks
    .filter(FILTER_MAP[filter])
    .map(task => (
      <Todo
        id={task.id}
        name={task.name}
        checked={task.checked}
        key={task.id}
        toggleTaskChecked={toggleTaskChecked}
        completeTask={completeTask}
      />
    ));

  const filterList = FILTER_NAMES.map(name => (
    <FilterButton
    key={name}
    name={name}
    isPressed={name === filter}
    setFilter={setFilter}
  />
  ));

  function addTask(name) {
    const newTask = { id: "todo-" + nanoid(), name: name, checked: false };
    setTasks([...tasks, newTask]);
  }

  return (
    <div className="app">
      <h1 className = "tasks-header">Task Tracker</h1>
      <Form addTask={addTask}/>
      <div className="list-buttons">
        {filterList}
      </div>
      <ul
        role="list"
        className="todo-list"
        aria-labelledby="list-heading"
      >
        {taskList}
      </ul>
    </div>
  );

}

export default App

Todo.js

export default function Todo(props) {

  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id={props.id} 
        type="checkbox" 
        defaultChecked={props.checked}
        onChange={() => props.toggleTaskChecked(props.id)} 
        />
        <label className="todo-label" htmlFor="todo-0">
          {props.name}
        </label>
      </div>
      <div className="btn-group">
        <button type="button" 
        className="complete-button"
        onClick={() => props.completeTask(props.id)}
        >
          Complete 
        </button>
      </div>
    </li>
  );
  }

index.js

const DATA = [
  { id: "todo-0", name: "Brush Teeth", checked: false },
  { id: "todo-1", name: "Make Dinner", checked: false },
  { id: "todo-2", name: "Walk Dog", checked: false },
  { id: "todo-3", name: "Run Reports", checked: false },
  { id: "todo-4", name: "Visit Mom", checked: false },
  { id: "todo-5", name: "Aerobics", checked: false },
  { id: "todo-6", name: "Project", checked: false },
  { id: "todo-7", name: "Lecture", checked: false },
  { id: "todo-8", name: "Have Lunch", checked: false }
];

ReactDOM.render(
  <React.StrictMode>
    <App tasks={DATA}/>
  </React.StrictMode>,
  document.getElementById('root')
);

FilterButton.js

function FilterButton(props) {
    return (
      <button
        type="button"
        className="toggle-btn"
        aria-pressed={props.isPressed}
        onClick={() => props.setFilter(props.name)}
      >
        <span className="visually-hidden">Show </span>
        <span>{props.name}</span>
        <span className="visually-hidden"> Tasks</span>
      </button>
    );
  }

export default FilterButton;

Answer 1

我们有 3 个布尔字段：checked、completed、completedAssoc。

  {
    id: "todo-0",
    name: "Brush Teeth",
    checked: false,
    completed: false,
    completedAssoc: false
  },

过滤器将按如下方式工作：

  const FILTER_MAP = {
    All: (task) => !task.completed,
    Associate: (task) => task.checked && !task.completedAssoc
  };

最后 completeTask 和 addTask 的变化：


  function completeTask(id) {
    const complField = filter === "All" ? "completed" : "completedAssoc";
    const updatedTasks = tasks.map((task) =>
      id === task.id ? { ...task, [complField]: true } : task
    );
    setTasks(updatedTasks);
  }

  function addTask(name) {
    const newTask = {
      id: "todo-" + nanoid(),
      name: name,
      checked: false,
      completed: false,
      completedAssoc: false
    };
    setTasks([...tasks, newTask]);
  }

在 React 中构建待办事项应用程序，使用过滤器但需要一种方法来确保 "complete" 按钮仅删除一个任务而不是两个

Building a todo app in React, used filters but need a way to make sure "complete" button only removes one task instead of two

javascript

list

filter

jsx

reactjs