问题标签 [react-state-management]
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.
javascript - React JSX 动态内容:顶部属性的增量
我在反应方面绝对是初学者,所以请原谅我,我被动态内容创建所困扰,我无法在顶级属性中进行增量,在渲染后我使用地图并且我正在使用顶级属性,我不知道如何增加数量,我在setstate中尝试过,但每次都不起作用,它发生在渲染之前,我只看到最后一个位置的图片
javascript - 将获取的数据作为道具(JSON)传递到状态以呈现数据
目前,我在运行我的 saga 时以 JSON 格式从 API 获取数据。当组件挂载时,获取过程开始。这意味着组件渲染两次。
现在,当数据作为道具可用时。我可以使用它来渲染它。
我的方法如下,我有一个:
- 具有初始状态的构造函数
- 我在“componentDidMount”中获取数据
- 我有一个函数,它从 props 中获取 JSON 属性并将其放入新变量中
- 当道具包含获取的数据时,我在我的 render() 函数中运行此函数
这种方法的问题:一旦组件运行数据变成“结构化”的函数,渲染函数就会循环,然后在一段时间后,属性的值会在控制台中显示警告消息。
我的问题:
- render() 运行一次时如何防止循环?
- 我该如何设计这个,以便获取对象的特定属性合并到一个新对象中,以及如何
我希望我描述了关于我的问题的最重要的事情。这是代码:
javascript - 状态改变但子组件不会重新渲染
父组件中的函数在 Head 组件的输入文本发生变化时被调用
该函数从 JSON 文件中获取数据并搜索从 Head 组件接收到的关键字
然后它改变状态并将其传递给第三个组件,即 NewsList
但是 NewsList 组件不会重新渲染
目标是从 Head 组件获取关键字 在 JSON 文件中搜索关键字查找匹配数据并将状态设置为匹配数据并将此状态作为道具传递给 NewsList 组件并渲染 NewsList 组件以显示此新数据
这是父组件
这是第一个子组件的代码
这是第二个子组件的代码
这是 JSON 文件
reactjs - 在 React 中设置 Material UI 的 TextField 组件的默认值
我正在开发一个 React JS 应用程序。我现在正在做的是从服务器异步获取数据并在 TextField 中呈现值。我知道该怎么做,而且我的方法也很有效。但是,我只是不喜欢我目前的做法。
这是工作方法
我不喜欢上述方法的一点是我必须实现handleChange
方法来检索输入值的值。如果我不实现它,我无法更改名称输入值,因为状态值没有更改。要检索一个简单的输入值,我必须编写额外的代码行。在 jQuery 中,我只是像这样检索输入值 $(selector).val()。在不实现该handleChange
方法的情况下,我可以像这样使用 ref。
然后我像这样动态检索值。
使用引用的问题是设置从服务器异步获取的默认值。
我可以像这样将默认值设置为 TextField
注意上面代码中的 defaultValue 属性。当我使用 defaultValue 设置值时,名称状态的初始值将设置为文本字段。但是即使我们没有实现 handleChange 事件,我们仍然可以更改从 UI 输入的名称的输入值。但问题是我异步获取数据并动态设置 this.state.name 。
所以在组件构造函数中,名称 state 为空。然后我在异步调用的回调中设置。但是 defaultValue 只能设置一次。所以输入字段总是显示为空。我想知道的是,如何动态设置 TextField 的 defaultValue?我使用 ref 的原因是我不想同时实现 onChange 事件来跟踪重置输入值的状态。如果我可以动态设置 defaultValue,我只会在异步调用的回调中动态设置值。简化这种情况的最佳解决方案是什么?
javascript - React:在构造函数中将状态属性初始化为某个值,但在渲染时返回未定义
在下面的组件中,我有一个 state 属性,它在构造函数中初始化为 5。但是当我在渲染中使用它时,它返回未定义。我不明白为什么。
reactjs - React Native - 如何临时持久化数据
我正在构建一个反应原生应用程序。该应用程序有多个屏幕,每个屏幕都需要与我的服务器通信以获取数据。这一切都很正常。但是当我切换屏幕时,我观察到组件的状态被破坏并重新创建。这对我来说不合适。因为用户在使用屏幕时可能会在屏幕上移动,并且每次重新渲染同一个屏幕并显示加载栏意味着糟糕的用户体验和服务器上不必要的负载。我们可以做些什么来让应用暂时记住状态?
reactjs - 从子组件更改父组件道具/状态
我目前正在学习 REACT 来创建一个网络应用程序。在这个应用程序中,我有一个处于父状态的 selectedCharacters 列表,并且在每个子组件中我都有一个玩家姓名的输入。我正在努力更新父母状态下的玩家姓名。
帮助将不胜感激。
arrays - 使用字典设置状态在 REACT 中不起作用
我目前正在学习 REACT,但状态仍然存在一些问题。好像我不能用字典设置状态。
第一个 console.log 显示由我的函数 createTurnListFromSelectedCharacters 正确生成的字典,而 setState 回调中的第二个 console.log 什么也不显示。如果我在 setState 中放置类似 'turnList: [1,2,3,4,5]' 或任何数组,它就可以工作。
reactjs - 从 axios 响应设置状态并在渲染中使用它
我目前的情况是在没有设置状态并且设置不能在渲染中使用的情况下做出反应。
这是我一直在尝试使用的示例代码,但这里的问题是即使我将状态设置为全局 this 不包含该值。我已经做了绑定来防止同样的事情。我也尝试过另外两件事
还有这个
最后一个在 self 中具有价值,但不能在我使用“this”这样的渲染中使用
做出一个简单的承诺并使用它真的有那么难吗?有没有更好的方法来做到这一点,我可能不知道?