问题标签 [setstate]

我正在尝试创建一个类似于此处的反应示例的过滤表：Thinking in React。我想添加的是在总项目集中显示多少项目的计数。我的想法是在顶级组件“资源”中保留状态变量“numShowing”。我还在这个组件中创建了一个函数来使用 setState() 增加“numShowing”。然后，我将该函数沿组件链传递，并在安装感兴趣的组件时调用它。这是一些伪代码（我删除了不必要的东西和对过滤组件的引用）：

组件层次结构是：Resources -> ResourcesTable -> ResourcesTableEntry。

我还尝试从 ResourcesTable.createEntry 函数递增。在这两种情况下，numShowing 只会设置为 1。我认为这是因为 setState 是异步的或非原子的，因此每次调用 incrementShowing() 时 numShowing 的当前状态为 0（控制台输出验证函数被调用的次数正确）。那么这样做的“正确”方法是什么？

刚开始使用 React，到目前为止，它一直相对顺利。

我有一个列表，其中包含 X 个预定义项，这意味着该列表始终以给定数量的行呈现。

此数据是在列表呈现之前从 REST API 收集的。数据包含与列表相关的变量，以及包含列表中每个项目的数组。

我选择了简单的方法，所以我用一个名为“data”的 JSON 对象填充每个组件，其中包含所有必要的内容。

渲染列表如下所示：

然后，在 MyList 的 getInitialState 中：

所以我将我的项目数组（JSON）存储在列表（父）的初始状态中，当我选择渲染列表时，我首先在一个数组中创建所有组件（子），如下所示：

然后我像这样渲染：

MyItem 的渲染函数看起来像这样：

现在，假设我想使用我刚刚从 API 获得的一些新数据从父级中修改子级数据。相同的结构，只是一个字段/列的值发生了变化：

我究竟做错了什么？

起初我认为这是因为我将 MyItem 的渲染函数包装在 a 中，但由于它在初始渲染时渲染得非常好，我会假设这是一个可以接受的包装器。

经过一些测试，似乎父视图被重新渲染，而不是子视图（基于父视图中更新的数据）。

JSfiddle：https ://jsfiddle.net/zfenub6f/1/

I am unable to get react-native's this.setState(); to work.

When I run the onUpdate method, I can see the correct JSON object being returned.

The issue is when the setState function is called nothing happens and the method fails. No more code is executed below it. It also not re-render the component after the setState function.

Here is my component code below:

我正在尝试清除数组，但遇到了麻烦。 this.setState({warnErrorTypes:[]})

我不确定我是否正在处理竞争条件，或者具体问题是什么，但我可以看到我的数组的值在我需要将其值重置为 [] 的情况下始终是错误的。

如何用 [] 替换包含 [1,2] 的数组，然后用 [3] 替换包含以下内容的数组：

1. this.state.warnErrorTypes 是一个以 [] 开头的数组
2. 根据条件，将 2 推入 Array
3. 根据条件，将 1 推入 Array。
4. 根据条件，不会将 3 推入 Array
5. 暂停。用户与 UI 交互
6. 数组空白：this.setState({warnErrorTypes:[]})
7. 根据条件，不会将 2 推入 Array
8. 根据条件，不会将 1 推入 Array
9. 根据条件，将 3 推入 Array。

上述逻辑的结果总是[2,1,3]，当我期望它是[3]。

问题：

真奇怪。我在子组件的输入框中输入，当我输入“onChange”方法时，应该将更新发送到父组件。我输入的第一件事未能更新，但随后我输入的任何其他内容都会更新，但与当前输入不同步。

我是 Reactjs 的菜鸟，也不是 JavaScript 的高手，所以我不知道发生了什么。

例子：

这是我的对象的控制台输出，用于更新状态和“setState”之后的新状态

第一次尝试更新value1：

第二次尝试更新value1：

如您所见，第一次没有更新。然后第二次部分更新。

代码：

下面是一个简单的反应组件，复选框的初始状态为 false。

我正在尝试使用 setState() 动态更改它。这没用。

这是我的代码：

我无法使用 setState 更改复选框状态。

这是一个小提琴

我有这样的组件结构

想法是块 E 中组件上的操作由组件 A 的函数处理为 A 的状态，然后作为道具传递给 B 和 C。我知道，更好的方法是使用 Flux、pubsub-js 或其他 Store-message 系统，但希望有人能解释为什么按照我的理解正确的解决方案不起作用。

从组件 E 的多个实例中同时调用组件 A 的此函数会导致竞争条件只有一个状态更改（而不是每个函数调用都提供更改）

这里的函数更新来自

与 ReactJS 推荐的做法背道而驰的糟糕解决方案，但效果很好：

我的问题是：

它是一个错误，多个同时 setState 调用竞争条件，还是我在不理解的情况下做错了什么？

我想知道直接用状态或道具渲染组件之间的区别。

以下代码用于渲染功能

1.

2.

3.

当我使用 setState 监听回流动作时，前两种情况会崩溃。如果有人建议使用 setState 以外的其他方法，或者告诉我这三个代码片段的区别，我们将不胜感激。

我试图将多个组件的状态（actiu）设置为 false，通过类引用它们。当我从一行中单击一个标签时，如何实现这一点，该行中所有元素的活动状态都变为 false？这是我的组件树：

有一些 Blade 模板语法会生成每一行标签

在此先感谢您的帮助！

我无法弄清楚我在这里做错了什么。我有一个事件触发一个函数来改变几个值的状态，这样我就可以触发一个 API 调用；但是，函数第一次运行时状态不会改变。该函数第二次运行时，设置了与前一次运行相比的状态更改。什么可能导致这种延迟？

所以你可以在下面看到handleFilterChange从事件中接收值，我可以验证这些值是否被正确接收；但是，如果我在设置后立即检查状态值，我可以看到它是未定义的。当事件第二次发生时；但是，我可以看到现在已经发生了原始状态更改，但第二次没有发生。那么为什么 setState 必须被调用两次才能真正设置状态呢？