React 组件不会在值更改时重新渲染并显示 CSS 更改

Question

目前我正在构建一个依赖于外部数据库数据的 React 组件。

我想要它做的是映射数据，并在屏幕上呈现给定组件的列表。它成功地做到了。

但是，我还希望它根据单击输入时执行的功能来更改自己的外观。

此输入是一个复选框，可根据是否选中将值从 false 更改为 true，或将 true 更改为 false。

如果输入被选中（即为真），则组件应添加两个属性 - 一个通过更改其背景颜色添加到整个容器 div，另一个通过添加删除线文本装饰添加到段落标签。

单击输入时值成功更改 - 如果值为 false，则更改为 true，如果输入为 true，则将其更改为 false。

然而，一旦输入被点击一次，它就不再改变样式。我本质上希望它根据价值不断变化 - 而不仅仅是一次。

谁能看到我在这里做错了什么？为什么 CSS 不是不断变化，只变化一次？

注意 - 这只是我整个组件的一部分。这不是完整的文件 - 它只是正在呈现的内容的一部分。不确定这是否会影响事情。

这是我的组件代码：

const SubTasks = ({ subTasks, setSubTasks }) => {
    const [individualTask, setIndividualTask] = useState("")

    const pushTask = () => {
        setSubTasks([...subTasks, {task: individualTask, completed: false} ])
        setIndividualTask("")
    }

    return (
        <div className="subtasks-container">
            <label className="subtasks-label">Sub Tasks</label>

            <div className="subtasks-box">

                {
                    subTasks.map((task, key) => {

                        const setCompleted = () => {
                            if (task.completed === false) {
                                task.completed = true
                            } else {
                                task.completed = false
                            }
                        }

                        return (
                            <div className={task.completed ? "subtasks-task-container container-completed" : "subtasks-task-container"}  key={key}>
                                <div className="create-sub-task-checkbox">
                                    <input type="checkbox" value={task.completed} onClick={setCompleted} />
                                </div>
                                <div className="create-sub-task-title">
                                    <p className={task.completed ? "create-task-completed" : ""}>{task.task}</p>
                                </div>
                                <div className="create-sub-task-controller">
                                    <i className="fas fa-ellipsis-h"></i>
                                </div>
                        </div>
                        )
                    })
                }

                <div className="individual-task-input-container">
                    <input className="individual-task-input" type="text" value={individualTask} onChange={event => setIndividualTask(event.target.value)} />
                    <div className="create-task-button-container">
                        <button className="individual-task-button" onClick={pushTask}>Add</button>
                    </div>
                    
                </div>
            </div>
        </div>
    )
}

这是 CSS：

.subtasks-task-container {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 5px 0;
    border: 2px solid #e2e2e2;
    border-radius: 5px;
    margin-top: 20px;
}

.container-completed {
    background-color: #a5e1ad;
}

.create-sub-task-title p {
    font-size: 20px;
}

.create-task-completed {
    text-decoration: line-through;
}

Answer 1

你试过状态吗？我没有运行下面的代码，只是给出一些提示，如果需要你可以修改它。

subTasks.map((task, key) => {
    const [getTask, setTask] = useState(task);

    const setCompleted = () => {
        if (getTask.completed === false) {
            setTask({...getTask, "completed": true});
            console.log(getTask.completed)
        } else {
            setTask({...getTask, "completed": false});
            console.log(getTask.completed)
        }
    }

    return (
        <div className={getTask.completed ? "subtasks-task-container container-completed" : "subtasks-task-container"}  key={key}>
            <div className="create-sub-task-checkbox">
                <input type="checkbox" value={getTask.completed} onClick={setCompleted} />
            </div>
            <div className="create-sub-task-title">
                <p className={getTask.completed ? "create-task-completed" : ""}>{getTask.task}</p>
            </div>
            <div className="create-sub-task-controller">
                <i className="fas fa-ellipsis-h"></i>
            </div>
    </div>
    )
})