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

Posted 2023-02-19

【中文标题】React 组件不会在值更改时重新渲染并显示 CSS 更改

【英文标题】：React component not re-rendering and showing CSS change upon value changing

【发布时间】：2021-08-02 15:52:59

【问题描述】：

目前我正在构建一个依赖于外部数据库数据的 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;

【问题讨论】：

能否分享一下subTasks是如何初始化的？

当然——我现在已经把完整的组件放进去了。

【参考方案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>
    )
)

【讨论】：

因为我正在通过数组进行映射以显示任务列表，所以很遗憾我不能使用状态，因为它在回调中，并且钩子不能在回调中使用。

是否可以在地图循环中创建新的子组件，然后您可以按照上述方式进行操作？

希望您尝试使用以下代码：useEffect(()=> ,[individualTask​​]) @JonNicholson