问题标签 [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.
reactjs - 在 React JS 中将 props / state 传回父组件
我有两个组件,一个包含多个选项的选择列表和一个按钮组件
我想在 UI 中做的是用户可以从他们想要的选择列表中选择任何选项,然后按下按钮将列表重置为“选择”
我将父组件作为唯一的事实来源 - 所有更新的状态都传递回父组件,实际上我已经在一个文件的上下文中使用以下代码很好地工作了;
但是我真正喜欢做的是将重置按钮移动到它自己的文件中,这就是我试图将道具/状态传递回父级的地方。
所以渲染方法实际上看起来像这样
我导入 TestComponent 然后在 TestComponent 内部是我将为 SelectListReset 组件提供代码的地方,但我遇到的问题是现在这些值作为道具发送给它应该是不可变的,所以不能更新?
这就是我的理解停止的地方..如果有人能指出我正确的方向,我将非常感激!
javascript - 如何动态更新按钮 onClick 函数?
我正在开发一个应用程序,其中有一个 Bootstrap v4 模式,在其中呈现一个表单以获取输入数据,以便我可以在“卡片”上显示它。这部分没问题,但问题是,我想使用相同的模态来编辑之前插入的数据(我将在卡片中单击,它将使模态与卡片数据一起出现),这就是我的位置卡住。我一直在试图改变它的功能,但还没有成功。
有很多 console.log 正在进行,因为我仍在学习并不断输出我的代码卡在哪里。
好的,这是主要组件:
这是模态:
reactjs - 在页面刷新之前反应保存全局状态
我正在使用 React 构建一个用户需要登录的网站。
该网站保留用户的状态。
这是身份验证的状态。
这种状态变化不大。
当我刷新页面时,我的状态也会刷新!
如果有人刷新页面,我想保持状态。
我查看了:https ://hackernoon.com/how-to-take-advantage-of-local-storage-in-your-react-projects-a895f2b2d3f2但这仅适用于当前页面中的状态。
无论页面刷新时用户在哪个页面上,我都想保存应用程序的主要状态。
怎么做?
我不知道你们需要什么代码,所以问我,我会把它添加到问题中。
我真的需要帮助。
reactjs - 如何使用 redux 和 redux-thunk 将获取的数据从服务器保存到组件状态?
在我的反应应用程序中,我有一个名为配置文件的组件,我正在从服务器获取数据并将其显示在该组件中。我正在使用 redux 和 redux-thunk 以及 axios。在 mapDispatchToProps 函数的帮助下,我正在调用 redux 操作以在安装组件时获取该数据并将其保存到 redux 状态。之后,使用 mapStateToProps 函数,我通过道具在屏幕上显示该数据。这很好用。现在我想有可能编辑,例如,该用户的名字。为了实现这一点,我需要在从服务器获取数据时将该数据保存到组件状态,然后在更改文本字段时,也需要更改组件状态。不知道如何在获取数据后立即将数据保存到组件状态。
简化代码:
javascript - 基于React中的唯一键禁用按钮?
我有多个为多个项目呈现的按钮。所有按钮都有一个我传递给键的唯一 ID,我试图根据唯一 ID 禁用按钮。禁用布尔值处于状态,当单击按钮时,我希望它禁用那个唯一的按钮。
但是,我的代码禁用了所有呈现的按钮。
我已经使用 map 来访问我所在州的 parks items 数组,所以我不确定如果我将它们变成一个在该州具有唯一键的数组,我将如何映射按钮。
这是我到目前为止所拥有的:
我的状态:
按钮:
reactjs - ReactJS 使用动态键及其数据遍历状态数组
我有一个像这样的数组:
我想用这个数组迭代并填充我的表,但我收到错误this.state.data.map() is not a function。
这是我的反应组件:
this.state.data
如上所示,将使用示例数组进行更新。
我怎样才能做到这一点?我也尝试过Object.keys(this.state.data).map()
,但没有运气。
提前致谢。
reactjs - componentDidMount 中未定义的道具
这开始变得非常令人沮丧。基本上,我无法访问props
我的子组件。如果我尝试使用 - 直接渲染它们this.props
,它可以工作,但如果我需要对它们进行额外的处理,或者将它们保存到state
,我总是得到未定义的道具。我有一个父组件,它看起来像这样:
还有我的子组件SessionTime
,看起来像这样:
谁能解释一下,为什么在我的函数中两者this.props.date
都this.props.title
未定义componentDidMount
?我的组件中有更多组件,我EventNode
也有同样的问题。
更改componentDidMount
为componentWillMount
无济于事。我相当确定我的父EventNode
组件有问题,但我不知道在哪里。里面EventNode
render()
所有的状态变量都被定义了。
reactjs - 如何在这里传递状态?
我有一个ModifyWordPartButton
具有 stateisHovered
和 child的组件IconButton
。IconButton
onclick
那是另一个组件的子组件,SelectWordPartToModify
,它有一个方法handleClickOpen()
。IconButton
应该能够拥有它的onClick
= 。SelectWordPartToModify
handleClickOpen()
使用此代码时:
ModifyWordPartButton
:
SelectWordPartToModify
:
导致IconButton
继承ModifyWordPartButton
的isHovered
状态而不是继承SelectWordPartToModify
的状态handleClickOpen()
。
当我使用此代码时
ModifyWordPartButton
:
SelectWordPartToModify
:
IconButton
不继承ModifyWordPartButton
的isHovered
状态。
我尝试用ModifyWordPartButton
'srender()
替换this.props.children
:
但是 React 给了我一个关于不识别IconButton
'isHovered
属性的错误。
这是我使用的完整代码: https ://codesandbox.io/s/zwlz41mo93?codemirror=1&eslint=1&fontsize=14
我该如何解决这个问题?
reactjs - React Hooks & useContext:这是一个好的模式吗?
我正在useContext
使用 React Hooks 学习。我想将包含应用程序状态的单个对象传递给上下文消费者,例如:
当然,我需要传递一些getters
并setters
启用子组件来更新应用程序状态。
这种模式是一种有效的方法吗——有更好的模式吗?
javascript - 状态更改时道具不会更新
我正在开发一个需要异步获取一些数据并将状态保存在父组件中但还将数据引用传递给子组件的应用程序。问题是一旦在状态中加载数据,道具就不会更新到新状态。我怎样才能使它在父状态更改时自动更新道具?
这是我的代码:
正如您在我的示例中看到的那样,我正在尝试登录this.props.ethereum
按钮单击。不幸的是,它不会注销App
组件中可访问的数据(在 Chrome React 工具中可见)。
编辑:
我误读了我的日志。道具正在更新,但getContainerClasses()
状态更改时不会触发。
基本上我想要做的是在数据尚未加载时隐藏内容并尽快显示它。