需要帮助找出 React 中的状态

Posted

技术标签:

【中文标题】需要帮助找出 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

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

【讨论】:

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

以上是关于需要帮助找出 React 中的状态的主要内容,如果未能解决你的问题,请参考以下文章

React.js 中的 AFC 中继器和 wp-rest api

react native 中的redux

我需要使用 useContext 和 map 函数更新 React 中的数组状态

React 无状态组件中的事件处理程序

在哪里使用 React 中的 Hooks 定义需要来自全局状态的数据的套接字事件侦听器

如何设置状态来更新 React 中的数组?