React 将 props 对象转换为数组然后 setState

2024-03-17

我需要转换这个道具:

到这个数组中:

this.setState({
            locations: [
                { label: 'California', value: 'california' },
                { label: 'Nevada', value: 'nevada' },
            ]
});

最初我用的是这个plugin http://jedwatson.github.io/react-select/并想用我的道具替换它的默认值,但无法转换它。


取决于您对 JavaScript 的喜好和写作偏好

利用for .. in运算符,它有缺点。 就会循环过去all可枚举的属性,甚至是原型中的属性。

var arr = [];
for (var key in myObject) {
  arr.push(myObject[key]);
}

或通过使用对象.keys https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys method

var arr2 = Object.keys(myObject).map(function (i) {
  return myObject[i];
});

或者最后,如果您正在运行 Babel 转译的应用程序,对象.值 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/values

var arr3 = Object.values(myObject);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 将 props 对象转换为数组然后 setState 的相关文章

  • 删除旧版本的 create-react-app

    我想使用创建一个新的反应应用程序create react app脚本 我仍然安装了一个不再受支持的全局版本 因此我卸载了全局版本并尝试创建一个新版本 如下所示 npx create react app myapp 然后我得到了一个没有使用模
  • Javascript“this”在 IE 中丢失上下文

    以下在 firefox safari chrome 中工作正常 在 IE 中 this 似乎在 handleEvent 函数中丢失上下文 警报的结果是 object Window 这不是我想要的 当从handleEvent 输出时 this
  • 无法处理未捕获的类型错误:无法读取 createRouterReducer 处未定义的属性“位置”

    我在将路由器连接到 rootReducer 时遇到问题 控制台日志 未捕获的类型错误 无法读取未定义的属性 位置 在 createRouterReducer reducer js 005c 9 不知道如何修复它并将路由器连接到减速器 app
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • CSS 内边框?

    我纯粹用 CSS 创建了左侧的按钮 它是一个div 中的一个div 然而 右侧的三个按钮是background属性于img标签 我这样做是为了按照以下说明模拟翻转效果here http kyleschaeffer com best prac
  • 将 SVG 路径转换为绝对命令

    给定一个 SVG Path 元素 如何将所有路径命令转换为绝对坐标 例如 转换此路径
  • 由于 MIME 类型而导致资源被阻止?

    多年来我已经成功地包含动态创建的 javascript 文件 这是一个例子 https granadainfo com sups php locs 95 https granadainfo com sups php locs 95 正如你所
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • IE localStorage 事件失火

    在 Internet Explorer 9 和 10 中 localStorage 实现意外地触发事件 这里有很棒的线索 Chrome 的 localStorage 实现存在错误 https stackoverflow com questi
  • JavaScript 错误:MVC2 视图中的条件编译已关闭

    我试图在 MVC2 视图页面中单击时调用 JavaScript 函数 a href Select a JavaScript 函数 function SelectBenefit id code alert id alert code 这里 b
  • 如何使用 NextJS 使用自托管字体face?

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp
  • 检查浏览器空闲的替代方法

    我有一个简单的网络信息亭 在鼠标未使用 jQuery 移动 30 秒后显示用户操作提示 var i null body wrap mousemove function clearTimeout i overlay fadeOut i set
  • 如何使用 Javascript 在 html 文件中搜索字符串?

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本
  • 如何为 React 组件参数创建文字类型?

    我创建了 SelectProps 界面 export interface SelectProps value string options string onChange value any gt void 我创建了反应组件
  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户
  • 如何将项目插入到特定索引处的空数组中?

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • javascript:完全删除top.location.hash?

    如果我的地址栏中已经有一个哈希值 例如domain com whatever 我打电话 top location hash wathever 被转换为domain com 没有任何内容 是否可以完全删除哈希值 所以没有 left 因为如果我
  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the

随机推荐

  • 如何从 ~/.aws/config 加载配置

    变更日志 https github com aws aws sdk js blob master CHANGELOG md 2440 says Load config from aws config if AWS SDK LOAD CONF
  • ListField 在编辑/创建帖子中显示

    我正在一个项目中使用 Flask mongoengine 我正在尝试从中获取基本的东西http docs mongodb org manual tutorial write a tumblelog application with flas
  • 如何在MASM中为一个项目编写和组合多个源文件?

    对于组装来说还是个新手 玩起来很有趣 我想将程序的功能拆分到多个文件中 特别是通过将类似的功能分组在一起进行组织 这些其他文件将由主文件 甚至希望其他非主文件 调用 我还没有成功 希望得到帮助 我不使用 IDE 更喜欢使用 notepad
  • Excel VBA 用于匹配和排列行

    我有一个 Excel 文档 其中包含 A 到 J 列 K 到 N 列包含相关数据 但未对齐 我需要将 F 列中的值与 K 列中的值进行匹配 以便它们对齐 当我移动K时 我必须一起移动L M N 我无法对 A 到 J 列进行排序 它们必须保留
  • JWT 计算签名 SHA256withRSA

    我试图 使用 SHA256withRSA 对输入的 UTF 8 表示形式进行签名 也可以 称为带有 SHA 256 哈希函数的 RSASSA PKCS1 V1 5 SIGN 从API控制台获取的私钥 输出将是 字节数组 所以让我们将 Hea
  • Django Count 和 Sum 注释相互干扰

    在建设综合体的同时QuerySet通过几个注释 我遇到了一个可以通过以下简单设置重现的问题 以下是型号 class Player models Model name models CharField max length 200 class
  • WPF 工具包数据网格标头和空源

    如果没有可显示的行 如何使数据网格显示标题 我的数据网格是 完全 只读的 自动生成列 真 CanUserAddRows 假 CanUserDeleteRows 假 CanUserResizeRows 假 IsReadOnly 真 如果没有行
  • 将 int 数组转换为 char*

    这可能吗 我想将其转换为 char 以便稍后检索该值 Sure int array 4 1 2 3 4 char c reinterpret cast
  • Github/compare:如何比较两个不同的文件(不同的文件名,都在 HEAD 中)?

    我可以使用github吗 compare在HEAD中显示两个不同源文件之间的差异 这是我在命令行上执行此操作的方法git diff git diff HEAD docs tutorial 01 boxed function pointers
  • 预编译资产时出现“命令失败,状态为 ()”

    当我在生产环境中编译资源时 我和很多用户一样遇到了类似的问题 唯一的区别是我无法从跟踪中得到任何提示来解决问题 rake assets precompile RAILS ENV production trace Invoke assets
  • 比较字典,更新而不覆盖值[重复]

    这个问题在这里已经有答案了 I am not寻找这样的东西 如何将两个字典合并到一个表达式中 https stackoverflow com questions 38987 how do i merge two dictionaries i
  • 如何使用 CSS3 将链接列表拆分为 3 列?

    我有一个这样的链接列表 div a href link html Dummy link text a a href link html Dummy link text a a href link html Dummy link text a
  • 我们能否将大的 ajax 调用拆分为多个较小的调用以更快地加载数据?

    我使用下面的 ajax 调用从数据库检索数据并将其显示在我的页面中 ajax type POST url MyPage aspx LoadGrid data idyear 2020 contentType application json
  • 是否有针对 Android 设备的特定于设备的错误汇编?

    我们发现特定设备上的崩溃发生在某些标准 Java 库内 此崩溃仅发生在一种特定型号的设备上 我确信各种 Android 设备还有其他奇怪的地方 是否有 Android 设备已知问题的汇编 我特别在想所提供的库和 JVM 类型内容中的奇怪之处
  • 如果 UserAgent 是 iPhone,则动态更改 url 或 WordPress 主题

    有什么办法可以做到这一点吗 我的网站是http kennethreitz com http kennethreitz com 它由顶级 WordPress 上的一些中等 PHP 驱动 我的选择是检测用户是否使用 iPhone 以及是否使用
  • 打字稿和运算符

    我正在努力寻找定义 TypeScript 中的运算符 我最近遇到了以下代码 type IRecord
  • jQuery UI 滑块(以编程方式设置)

    我想即时修改滑块 我试图通过使用来做到这一点 slider slider option values 50 80 此调用将设置值 但元素不会更新滑块位置 呼唤 slider trigger change 也没有帮助 是否有另一种 更好的方法
  • BERT 问答中长文本的滑动窗口

    我读过解释滑动窗口如何工作的帖子 但我找不到有关其实际实现方式的任何信息 据我了解 如果输入太长 可以使用滑动窗口来处理文本 如果我错了 请纠正我 说我有一条短信 2017 年 6 月 Kaggle 宣布注册用户突破 100 万 给定一些s
  • 解决 CSS 背景不打印的最佳方法

    CSS 背景不打印通常效果很好 但是 有时我使用它们来传达上下文信息 解决无法打印但您确实想要显示的 CSS 背景的最佳方法是什么 我当前正在处理的示例是一个显示财务信息的表格 不同的背景颜色用于指示数字的 好 程度 例如非常有利可图 有利
  • React 将 props 对象转换为数组然后 setState

    我需要转换这个道具 到这个数组中 this setState locations label California value california label Nevada value nevada 最初我用的是这个plugin http