问题标签 [react-state-management]

我目前正在自学 Redux。为此，我创建了一个简单的 Todo 应用程序。现在在这个应用程序上，我目前正在使用dispatch()将待办事项放入我的商店。这是关于你的意见的问题。我想避免代码异味。

我找到了两种方法来实现这一点。一用state一用ref。我想知道哪种方式更好？谢谢你的任何建议。两个版本如下。

版本一使用ref：

这是使用的第二个版本state：

编辑：正如qasimalbaqali在评论中指出的那样，这是关于 stackoverflow 的类似帖子。我仍然不确定，因为第一个答案说 refs 不好是有原因的，第二个答案说 React Devs 说 refs 非常适合从 dom 中获取值（这就是我正在做的事情！）。

我正在动态地将表行添加到表中。下面是它在 UI 中的外观：

这是我用来创建新行的逻辑：

我有一个状态变量this.state = ({rows: []})

在“插入”按钮上单击我正在做的事情：

在我的render()我有以下代码：

而且，显然我的决赛桌代码如下所示：

这是我的removeRow功能：

整个代码有效。我已经更改了变量名称并从中删除了不需要的代码，但这是为了了解我是如何设计它的。

我的问题是当我点击“删除”按钮时，它总是删除行中的最后一个项目，而不是我点击的项目行。如何解决这个问题？

我用谷歌搜索了一下，发现很少有例子，老实说，我觉得它们很复杂，所以我决定走自己的路。

请告知需要做些什么来解决这个问题。

I have a view that shows project items. Project information is in a data object in Projects (parent) component.

Parent component:

HTML code for a project item is in the Project (child) component as below.

Child component:

I need to show each element as a project in data object using child component.

我创建了一个textarea带有使用 Tiny MCE 选项的 React 组件，我使用该组件实现了该react-tinymce组件。

我基本上会使用这样的组件：

所以基本上如果mce道具设置为true你得到 TinyMCE 组件。

但是，虽然常规textarea版本会绑定您输入的任何内容 state.data.body，但 TinyMCE 版本不会。

请注意，此Textarea组件用作带有 onSubmit 方法的表单组件的一部分。

我正在使用 reactjs 和 Redux 将数据从一个页面传输到另一个页面，在第一页中我正在调度一个动作来保存值，这很好用

在第二页中，我有一个组件使用这个保存的值，所以 this.props.values 给了我确切的值但是在这个组件中我必须在渲染部分使用 this.state.values

有没有办法在我的第二页中将 this.props.values 链接到我的 this.state.values ？

我正在使用 React 和 Redux 开发一个 Web 应用程序。我是 React 和 Redux 的新手。现在，我在使用 React 和 Redux 时遇到了问题。问题是当我使用状态值设置字段值时，我无法更改输入字段值。

在我的组件中，我有一个名为 event 的属性，它处于来自 connect 的状态，就像这样。

如您所见，提交的事件来自减速器。在我的组件中，我可以像这样检索事件。

现在，我想做的是在编辑事件时，我喜欢在输入字段中维护事件的值。

因此，我像这样在输入字段中呈现状态值。

它正在维护输入字段中的值。但问题是我现在无法更改输入字段。我可以专注于文本输入字段，但是当我使用键盘输入任何内容时，值不会改变，只是继续显示状态值。我该如何解决这个问题？

我正在开发一个 React + Redux Web 应用程序。我的状态管理有问题。

我有一个EditEventComponent使用以下定义调用的组件。

如您所见，它正在从服务器异步加载事件。然后将事件值传递给 EventFormComponent。

这是 EventComponent 的定义。

请注意构造函数中的 this.isEditing 属性。

现在，我正在做的是显示使用 EventListComponent 的事件列表的页面。从该页面，如果用户单击事件小部件，用户将被重定向到编辑页面 (EditEventComponent)。我运行该应用程序，然后单击一个事件小部件并重定向到编辑页面。

由于事件不为空，this.isEditing 属性也按预期变为真。然后，我在浏览器中单击上一个按钮返回上一页 (EventListComponent)。然后我再次选择一个事件小部件进行编辑。然后当我第二次点击显示编辑页面时，如果加载了事件数据，isEditing字段就不再是true事件。

事件不为空。但是 isEditing 属性是假的。我想不出解决办法。我也不知道为什么。我认为当我单击浏览器中的“返回”按钮并选择要再次编辑的项目时会发生这种情况，这会将用户重定向到编辑页面。我的代码有什么问题？

我有一张这样的桌子：

当用户点击一个Edit按钮时，一个<input>应该出现在它的位置。

如果用户点击另一个Edit按钮，这个按钮也将被替换为<input>，并且前一个按钮<input>应该消失并Edit再次显示一个按钮。

简而言之，一次只能有一个字段处于编辑模式。

这是我的初始state：

这是我的edit()方法：

render这是我方法中 JSX 的一部分：

问题是当我点击一个Edit按钮时，会<input>出现，但是当我点击另一个Edit按钮时，前一个<input>不会消失。

我是 React 的新手，我正面临与状态更新相关的问题。

我有一个父组件。在父组件构造函数中，我创建了子组件的多个实例。

使用父组件的状态，我显示一个子组件实例。

子组件的实例具有一些作为道具传递的父组件状态值。

父组件状态如下所示（我已简化代码，以便更清晰）

父组件构造函数如下所示

这是渲染方法

从那里，我可以从一个子组件显示切换到另一个，这样它就state.displayedContainer可以工作了。但是当state.isLoading更新时，子组件不会检测到它。我认为这是因为我在构造函数中创建了子组件。

如果我想在渲染之前保留创建子组件的逻辑但修复未检测到状态更新的问题，我该怎么办？

谢谢您的帮助 ！

我检查了几个类似的问题并尝试实施他们的答案，但仍然没有运气。这是代码：

currentUser 作为 props 从父组件向下传递，并包含一个文件引用数组（this.props.currentUser.file_refs）。内部 准确地将所有文件引用记录到控制台console.log。componentDidMount()但是，当getFileData()函数运行时，它会返回错误：TypeError: Cannot read property 'length' of undefined.

我已经尝试过： - 更改为componentWillMount() - 添加if (this.props.currentUser){this.getFileData())我的componentDidMount()功能 - 添加if (!this.props.currentUser.file_refs) { return null ) return ( <Fragment> ..... </Fragment>

有人知道我在这里做错了什么吗？

编辑：从父组件添加路由，Main.js