使用 React 和 Redux 進行過濾，這不會阻止重新渲染

Question

我是 React 和 Redux 的新手，我遇到了一個問題。 我的應用程序是一個簡單的 ToDo 應用程序，我有 2 個主頁（它們是一個組件）普通符號和歸檔符號。 這是我有問題的代碼

import React from 'react';
import { Fragment } from 'react/cjs/react.production.min';
import { TableRow } from './TableRow';
import getNotes from '../services/sortNotes';
import { useDispatch, useSelector } from 'react-redux';
import { addNote, filterNotes } from '../redux/actions';

const Table = ({ isArchived, setCurrentNote }) => {
    const notes = useSelector(state => {
        const { notesReducer } = state;
        return notesReducer.notes;
    });

    return (
        <div className="top-table">
            <table className="table">
                <colgroup>
                    <col className="first-column" />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col className="date-column" />
                    <col className="last-column" />
                </colgroup>
                <thead className="table-head">
                    <tr>
                        <td></td>
                        <td>Name</td>
                        <td>Created</td>
                        <td>Category</td>
                        <td>Content</td>
                        <td>Dates</td>
                        <td>{
                            !isArchived ? (
                                <Fragment>
                                    <button className="table-body-button" id="placehoder">Edit</button>
                                    <button className="table-body-button" id="archive-all">Archive</button>
                                    <button className="table-body-button" id="delete-all">Delete</button>
                                </Fragment>
                            ) : <button className="table-body-button" id="unarchive-all">Unarchive</button>
                        }
                        </td>
                    </tr>
                </thead>
                <tbody className="table-body" id="main-content">
                    {
                        notes.map(note => (
                            <TableRow key={note.id} note={note} setCurrentNote={setCurrentNote}>
                            </TableRow>
                        ))
                    }
                </tbody>
            </table>
        </div>
    )
}

export default Table;

首先，我嘗試在內部使用過濾器並且它運行良好，直到我指出我的應用程序已經失去了它的重新渲染能力。 接下來，我嘗試在減速器內部做一些事情，但我現在不知道如何做到這一點。 這是我的減速機：

import { ADD_NOTE } from "./types";

const initialState = {
    notes: [
        {
            id: 0,
            name: "Shopping List",
            created: 'May 20, 2020',
            category: 'Task',
            content: 'lorem ipsum bla-...',
            dates: '',
            archive: false
        },
        {
            id: 1,
            name: "The theory of evolution",
            created: 'July 30, 2020',
            category: 'Random_thought',
            content: 'The evolution is...',
            dates: '',
            archive: false
        },
        {
            id: 2,
            name: "New Feature",
            created: 'December 25, 2020',
            category: 'Idea',
            content: 'Implemented new feature',
            dates: '',
            archive: false
        },
        {
            id: 3,
            name: "Books",
            created: 'February 10, 2021',
            category: 'Task',
            content: 'New startup',
            dates: '',
            archive: false
        },
        {
            id: 4,
            name: "William Gaddis",
            created: 'September 9, 2021',
            category: 'Task',
            content: 'Meet William',
            dates: '',
            archive: false
        },
        {
            id: 5,
            name: "What about inventions?",
            created: 'September 30, 2021',
            category: 'Idea',
            content: 'Try to develop time machine',
            dates: '',
            archive: true
        }
    ],
}

export const notesReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_NOTE:
            return {
                ...state,
                notes: [...state.notes, action.note]
            }
        default:
            return state;
    }
}

因此，如果您能幫助我，我將不勝感激，因為我真的不知道如何解決這個問題。 鏈接到我的完整代碼： https://github.com/radush98/task2

Answer 1

我找到了解決方案！

import React from 'react';
import { Fragment } from 'react/cjs/react.production.min';
import { TableRow } from './TableRow';
import getNotes from '../services/sortNotes';
import { useDispatch, useSelector } from 'react-redux';
import { addNote, filterNotes } from '../redux/actions';

const Table = ({ isArchived, setCurrentNote }) => {
    console.log(isArchived)

    const notes = useSelector(state => {
        const { notesReducer } = state;
        return notesReducer.notes;
    });

    return (
        <div className="top-table">
            <table className="table">
                <colgroup>
                    <col className="first-column" />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col className="date-column" />
                    <col className="last-column" />
                </colgroup>
                <thead className="table-head">
                    <tr>
                        <td></td>
                        <td>Name</td>
                        <td>Created</td>
                        <td>Category</td>
                        <td>Content</td>
                        <td>Dates</td>
                        <td>{
                            !isArchived ? (
                                <Fragment>
                                    <button className="table-body-button" id="placehoder">Edit</button>
                                    <button className="table-body-button" id="archive-all">Archive</button>
                                    <button className="table-body-button" id="delete-all">Delete</button>
                                </Fragment>
                            ) : <button className="table-body-button" id="unarchive-all">Unarchive</button>
                        }
                        </td>
                    </tr>
                </thead>
                <tbody className="table-body" id="main-content">
                    {
                        notes
                        .filter(note => isArchived ? note.archive : !note.archive)
                        .map(note => (
                            <TableRow key={note.id} note={note} setCurrentNote={setCurrentNote}>
                            </TableRow>
                        ))
                    }
                </tbody>
            </table>
        </div>
    )
}

export default Table;

這就是它的工作原理（首先，我試過）像這樣

notes
                        .filter(note => isArchived ? note.archive === isArchived)
                        .map(note => (
                            <TableRow key={note.id} note={note} setCurrentNote={setCurrentNote}>
                            </TableRow>
                        ))

但它阻止了我的重新渲染，所以我把這個過濾器改成了這樣

notes
                        .filter(note => isArchived ? note.archive : !note.archive)
                        .map(note => (
                            <TableRow key={note.id} note={note} setCurrentNote={setCurrentNote}>
                            </TableRow>
                        ))