使用 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;

首先，我尝试在内部使用过滤器并且它运行良好，直到我指出，我的应用程序已经失去了它的重新渲染能力。接下来，我尝试在我的 reducer 中做一些事情，但我现在不知道具体怎么做。这是我的减速机：

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

所以如果你能帮助我，我将不胜感激，因为我真的不知道如何解决这个问题。 Link 到我的完整代码： 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>
                        ))

使用 React 和 Redux 过滤，不会阻止重新渲染

Filtering using React and Redux, that will not prevent rerendering

javascript

reactjs

redux