需要帮助找出 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
我需要使用 useContext 和 map 函数更新 React 中的数组状态