javascript - Redux 状态更改后组件不会重新渲染

Question

我正在尝试制作待办事项列表。我从 Redux 示例中截取 UI，并开始以自己的方式编写逻辑。我遇到了一个问题。所以，问题是当我点击 Mark All Completed 按钮时，我对 dos 的所有复选标记在 UI 上不可见，但状态已更新，这在 Redux Dev Tool 中完全可见。请帮助我了解这是怎么回事。

gitHub：https ://github.com/Alexander-Korniichuk/Redux_Practice/commit/6c981f47d068614b56ab37410210e43869f7247d

在这里，我发送一个动作。（页脚.js）

import React from 'react';
import {useDispatch} from "react-redux";
import {markAllCompleted} from "../actions";


const Footer = () => {
    const dispatch = useDispatch();
    return (
        <footer className="footer">
            <div className="actions">
                <h5>Actions</h5>
                <button className="button"
                        onClick={() => dispatch(markAllCompleted())}>
                    Mark All Completed
                </button>
                <button className="button">
                    Clear Completed
                </button>
            </div>

            <RemainingTodos/>
            <StatusFilter/>
            <ColorFilters/>
        </footer>
    )
}

export default Footer

在这里，我选择所需对象的 Completed 字段并将其粘贴到 defaultValue (TodoListItem.js)

import React, {useState} from 'react';
import {ReactComponent as TimesSolid} from './times-solid.svg';
import {markCompleted, deleteToDo, addColor} from "../actions";
import {useDispatch, useSelector} from "react-redux";


const TodoListItem = ({todo}) => {
    const dispatch = useDispatch();
    const {text, id} = todo;
    const completed = useSelector(state => state.todos.find(item => item.id === id).completed);
    const colorNames = useSelector(state => state.filters.filterColors);
    const [innerSelectColor, setInnerSelectColor] = useState("");

    console.log(completed);
    console.log("render TodoListItem");

    const colorSetter = (e) => {
        dispatch(addColor(id, e.target.value));
        setInnerSelectColor(e.target.value);
    }

    return (
        <li>
            <div className="view">
                <div className="segment label">
                    <input className="toggle"
                           type="checkbox"
                           defaultChecked={completed}
                           onClick={() => dispatch(markCompleted(id, completed))}
                    />
                    <div className="todo-text">{text}</div>
                </div>

                <div className="segment buttons">
                    <select className="colorPicker"
                            onChange={colorSetter}
                            style={{color: innerSelectColor}}
                    >
                        {colorNames.map((color, index) =>
                            <option key={index} value={color}>{color.toUpperCase()}</option>)}
                    </select>

                    <button className="destroy" onClick={() => dispatch(deleteToDo(id))}>
                        <TimesSolid/>
                    </button>
                </div>
            </div>
        </li>
    )
}

export default React.memo(TodoListItem);

提前致谢。

标签： javascriptreactjsredux