问题标签 [react-state]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
222 浏览

javascript - 尽管 Semantic-React-UI 表单中存在错误状态,但成功消息仍会继续触发

我正在尝试根据表单组件的状态触发适当的消息,以在表单提交时进行前端验证。

我正在进行的主要验证之一是检查电子邮件是否存在,如果存在,则应该继续看到错误消息触发。如果数据库中不存在成功消息,则应触发;当然,如果其他验证通过!

我正在使用Semantic-UI React Forms来帮助验证。

这些是我在表单组件的状态对象上设置的键和值:

这是我的提交处理程序,它在提交时触发:

这是表单视图/标记的一部分:

我提供了一个gif,您可以看到导致问题的formSuccess关键跳转到一秒钟。true但我认为我handleError在提交时会处理这个问题?

再次处理错误:

句柄提交的摘录:

每次点击注册时,消息不应该动画吗?

请帮忙!!!谢谢!

0 投票
1 回答
185 浏览

javascript - ReactJS:类型数组的状态在重新渲染期间解构为元素

我正在尝试做的事情

我有一个带有“配置文件”数组的主要组件。对于每个配置文件,我有两个不同的条件组件(一次只显示一个)。这两个组件中的每一个都有一个按钮,单击该按钮可以切换组件。所以我将状态提升到主组件,使用“useState”钩子创建组件状态(这是一个数组,其中每个索引都是一个字符串,表示要为配置文件数组中的每个元素显示的子组件),我为这些点击创建了两个事件处理函数,并将它们作为渲染道具传递给它们的子组件。

它们从第一个子组件开始。

问题以及我是如何找到它的

当您按下按钮切换到另一个组件时,它会起作用。当您按下按钮返回时,它会崩溃。说“TypeError:无法分配给字符串'大'的只读属性'0'”。我在 useState 初始化之后以及每个函数中的状态更改调用之后放置了一些 console.log(state) 。会发生什么(只有一个元素的测试列表)是

  1. 组件初始化时,状态显示为['normal'](原始状态,良好)
  2. 单击第一个组件的按钮时,['normal'] 变为 ['large'](如预期的那样)
  3. 现在重新渲染组件时,状态变为“大”(不再是数组)
  4. 单击第二个组件的按钮时,应用程序崩溃导致它无法更改数组元素,因为它不再是数组

主要部件

子组件 1:

子组件 2:

预期和实际结果

我希望它在单击第一个组件的按钮时返回到原始组件,但状态变成了一个字符串数组并且应用程序崩溃了。

0 投票
2 回答
350 浏览

reactjs - 单选按钮单击类型错误:无法读取未定义的属性“setState”

我正在尝试根据单击的单选按钮设置状态。

我的代码:

每当我单击单选按钮时,都会出现错误:

我究竟做错了什么?

0 投票
2 回答
10005 浏览

reactjs - ReferenceError:找不到变量:React Native 0.60.4 中的状态

我正在使用 React native 0.60.4 和 react-native-router-flux 4.0.6。我有一个可以正常工作的登录组件,但是当我在用户更改密码后将用户重定向到登录屏幕时,会弹出上述错误并且应用程序崩溃。

我尝试在其中打印状态变量ComponentDidMount()- 它被打印出来。打印了我正在初始化状态变量的构造函数中的所有日志。发布此错误弹出并且应用程序崩溃。

部分错误信息:

[08:42:09] 我 | ReactNativeJS ▶︎ 登录组件DidMount

[08:42:09] E | ReactNativeJS ▶︎ ReferenceError:找不到变量:状态

我相信代码中没有问题,因为每当加载应用程序时它都可以正常工作。

代码:

在我从 react-native 0.56.0 升级到 0.60.4 之前,我的代码运行良好,并且我将 react-native-router-flux 从 ^4.0.0-beta.28 升级到 ^4.0.6。不太确定这条信息是否有帮助。

0 投票
1 回答
328 浏览

reactjs - 使用样式化组件更改状态-> React,未捕获 RangeError:超出最大调用堆栈大小

我有一个按钮,单击时显示面板,单击面板时将其隐藏

代码,按预期工作

MenuLogin样式化组件在哪里

但是,现在我想setModal在这个组件之外使用,所以我所做的就是将 移动const [modal, setModal] = useState(0)到父元素并将这些变量作为参数传递

所以现在我有

使用这样的父代码

但是现在,当我尝试setModal(0)从同一个位置(在子组件中)隐藏元素()时,我得到了 React, Uncaught RangeError: Maximum call stack size exceeded

如果我做类似的事情

在出现错误之前,我可以多点击两次 (??)

阅读React, Uncaught RangeError: Maximum call stack size exceeded我会说我在这里做一些概念上的错误,但找不到它是什么

编辑:我可以看到这应该可以工作(见代码和框)所以我的怀疑是样式化组件以某种方式导致循环?

0 投票
3 回答
1464 浏览

reactjs - 将扩展面板功能组件转换为类组件

我是比较新的反应。我一直在尝试为下面的手风琴扩展面板创建一个功能格式的类组件。我无法根据类组件更改 handleChange 事件。我已经尝试了所有可能的方法,但我失败了。

请帮忙!

0 投票
1 回答
580 浏览

reactjs - 从子组件更新状态时检查父挂载状态

在我的 react native 0.59.9 应用程序中,App该类有 2 个状态,可以由子组件更新。

Event并且Group是可以更新App状态的子组件。在两者updateGroupupdateToken,应用程序如何检查App执行前的安装状态setState?我担心的是执行App时可能不会安装setState。这肯定会抛出警告。

更新:

updateToken都在componentDidMountEventGroup。updateGroup 通过点击触发。这是代码:

0 投票
1 回答
85 浏览

reactjs - 设置组件状态,来自无法访问的变量

我怎样才能media.duration生活在一个国家环境中?

现在我无法访问它,即使在尝试更改状态之后

来自:当我使用文件阅读器读取视频文件时如何获取视频的持续时间?

________________________________________

我试过了,但没有用

0 投票
1 回答
100 浏览

javascript - 如何将函数传递给自己的反应上下文提供程序,让您编辑状态?

我有以下代码:

如果我现在addNumber()像这样通过提供程序中的 Context api 调用该函数

numbers等于[2]而不是[1, 2]

我的提供程序函数中的状态NumberProvider不会像NumberContext.Provider. 我怎样才能防止这种情况发生?实现这一点的设计模式会是什么样子?

0 投票
0 回答
167 浏览

reactjs - TypeError:无法在 Next.JS 和 with-redux-thunk 中将类作为函数调用

我正在尝试将Next.js with-redux-thunk与身份验证应用程序集成。

因为应用程序很小,我知道我应该考虑道具钻探或上下文,但我想拥有某种商店,只是因为登录、注册和广播每个用户的设置和偏好应用程序。

TypeError:无法将类作为函数调用

我不会追踪到引发错误的组件吗?

以下是一些可能的竞争者:

我的pages/_app.js文件:

我的pages/index.js

我刚刚扔了我的store/index.js文件:

我想我只需要一双额外的眼睛!