Question

这是控制台始终记录正确的数组，但是这里的要点是它应该在'TodoList.tsx'中输出该数组。不知道在这种情况下如何解决该问题。任何可以帮助我的人。要查看大图，请单击此链接：

我希望从 App.js 的currentFilter函数返回的值将其传递给 TodoListItem.js ，因此当用户单击过滤器按钮时，它将不断更新地图函数。

// TodoFilter

import React from 'react';

interface TodoListFilter {
    currentFilter: CurrentFilter;
}

export const TodoFilter: React.FC<TodoListFilter> = ({ currentFilter }) => {
    return (
        <ul>
            Filter
            <li onClick={() => currentFilter('All')}>All</li>
            <li onClick={() => currentFilter('Complete')}>Completed</li>
            <li onClick={() => currentFilter('Incomplete')}>Incompleted</li>
        </ul>
    )
}

// App.js

  const currentFilter: CurrentFilter = filterTodo => {
    let activeFilter = filterTodo;
    switch (activeFilter) {
      case 'All':
        return todos;
      case 'Complete':
        return todos.filter(t => t.complete);
      case 'Incomplete':
        return todos.filter(t => !t.complete);
       default:
        console.log('Default');
    }
  }
  
    return (
    <React.Fragment>
      <TodoList 
        todos={todos} 
        toggleTodo={toggleTodo} 
        deleteTodo={deleteTodo} 
        editTodo={editTodo} 
        saveEditedTodo={saveEditedTodo} 
        getEditText={getEditText}
      />
      <TodoFilter currentFilter={currentFilter}/>
      <AddTodoForm addTodo={addTodo}/>
    </React.Fragment>
  )
  
// TodoListItem

  import React from 'react';
import { TodoListItem } from "./TodoListItems"; 

interface TodoListProps {
    todos: Array<Todo>;
    toggleTodo: ToggleTodo;
    deleteTodo: DeleteTodo;
    editTodo: EditTodo;
    getEditText: GetEditText;
    saveEditedTodo: SaveEditedTodo;
    currentFilter: CurrentFilter;
}

export const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo, deleteTodo, editTodo, getEditText, saveEditedTodo, currentFilter }) => {
    return (
        <ul>
            {todos.map((todo, i) => {
                return <TodoListItem key={i} 
                            todo={todo} 
                            toggleTodo={toggleTodo} 
                            deleteTodo={deleteTodo} 
                            editTodo={editTodo} 
                            saveEditedTodo={saveEditedTodo} 
                            getEditText={getEditText}
                        />
            })}
        </ul>
    )
}

//Folder structure
src
-App.tsx
-AddTodoForm.tsx
-TodoFilter.tsx
-TodoList.tsx

Answer 1

列表未更新的原因是，作为道具传递给currentFilter组件的TodoList根本没有被使用。

请考虑两种解决方法：

传递完整列表+过滤器对象，然后在TodoList内应用过滤器
在App组件级别将过滤对象应用于列表，并将过滤后的列表传递给TodoList组件。

我个人会采用第二种方法，但这取决于你：）

Answer 2

您需要创建两个数组。在您的示例中，一个数组是原始数组，第二个数组被过滤。

const [todos, setTodos] = useState(initialTodos);
const [filtered, setFiltered] = useState(initialTodos);

现在，您需要在列表组件中发送经过过滤的数组。必须对todos数组进行任何更新或删除。在currentFilter中，您必须从todos的原始数组中进行过滤，并且将其设置为过滤后的数组，如下所示：

useEffect(() => {
   setFiltered(todos);
}, [todos]);

叉状沙箱的链接：link

让我知道这是否对您有帮助。

我如何在React TypeScript中输出过滤的待办事项列表

2 个答案: