需要帮助找出 React 中的状态

Posted 2023-02-21

【中文标题】需要帮助找出 React 中的状态

【英文标题】：Need Help Figuring Out State in React

【发布时间】：2021-09-28 08:02:46

【问题描述】：

我正在开发一个基本的 Todo 应用程序。我将状态中的待办事项存储为对象数组。对象键是待办事项，值为真（完成）或假（未完成）。当我单击一个按钮来检查一个项目时，我想更改待办事项的值以及更改元素的样式以指示它已完成。

this.state = items: [..."todo item": false]

handleClick(e, item, index)
        e.preventDefault()
        let newState = [...this.state.items];
        if(this.state.items[index][Object.keys(item)] == false)
            //blue = done
            e.target.parentNode.style.color = 'blue';
            newState[index][Object.keys(item)] = true;
        
        this.setState(items:newState)
        console.log(this.state.items[index])

这不起作用。我假设这是因为 setState 是异步的。 我想尝试这种方式，因为我想将我的状态对象发送到我的数据库，这样我就可以跟踪每个项目的“完成度”。我不想从我的 items 数组中删除该项目。 任何帮助将不胜感激。如果需要更多信息，请告诉我！

【问题讨论】：

这能回答你的问题吗？ Why calling setState method doesn't mutate the state immediately?

定义“不工作”。您观察到的结果与您期望的结果是什么？如果您只是指最后一个console.log 语句，那么您的假设是正确的，setState 是异步的。知道这一点，这里什么“不起作用”？状态是否成功更新，而您只是没有正确观察它？忽略您的console.log 声明，应用程序中的状态是否真的得到更新？

@David，它似乎没有正确更新状态或更改父元素的颜色。

@bc: 你能提供一个minimal reproducible example 演示吗？在这里作为堆栈 sn-p 还是在 CodeSandbox 之类的外部？对于初学者，这不是我在 React 中更改元素样式的方式。这应该由国家驱动。因为如果渲染中的样式是基于状态的，那么这个变化不会影响任何事情，因为组件会重新渲染。

您究竟为什么要使用[Object.keys(item)] 进行索引？你应该没有理由这样做

【参考方案1】：

我不认为 setState 是这里的问题吗？问题是如何修改颜色。

对于颜色，我会使用基于状态变量的三元组，而不是 DOM 操作。类似这样的答案：ternary operator in jsx to include html with react

如果状态没有上传（在函数开始时记录它，以便在运行之后而不是立即看到它是什么），那么这是一个单独的问题。

【讨论】：

成功了！感谢您的提示，我现在可以使用它了。