javascript - 从多个子组件更新父组件状态,不考虑更新的状态值

标签 javascript reactjs

我有一个与react js相关的问题。

我有一个场景,我们在父组件中有一个状态。它必须由子组件更新。因此,根据状态值,我将在父组件中执行其他操作。

但是,如果我渲染多个子组件,则父组件的状态只会更新一次。

您能否帮助我理解为什么状态只更新一次以及可能的解决方法是什么。

下面是示例的代码沙箱链接。

https://codesandbox.io/s/heuristic-cori-8793u?file=/src/App.js

谢谢。

最佳答案

问题是由于 updateCounter 已经关闭了 count 的值而引起的,因此当您使用两个子组件调用它两次时,“旧”值两次都使用了 count。您可以通过使用 useState 的“更新”形式来避免这种情况。这可确保您增加 count 的“当前”值:

const updateCounter = (num) => {
  setCount(c => c + 1);
  console.log(count);
};

关于javascript - 从多个子组件更新父组件状态,不考虑更新的状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66527318/

相关文章:

Mootools 请求更改 JavaScript 代码?

javascript - 类型错误 : dispatch is not a function when using react-context api

javascript - reactjs 中的反模式到底是什么?

javascript - 为什么 ref 值增加两次

javascript - React - 从 API 返回数据

javascript - 在javascript中将java列表转换为数组

javascript - 比较日期 JavaScript

javascript - 使用 requestAnimationFrame 的简单球动画 HTML5

javascript - 从上一级目录加载本地 javascript 文件

javascript - 如何使用 useStyle 为 Material Ui 中的类组件设置样式