如何在reactjs中解构如下所示的数组
在React中解构一个数组，可以使用ES6的解构语法。具体步骤如下：
- 首先，确保你已经安装了React和相关的依赖。
- 在React组件中，定义一个数组变量，例如：
const myArray = [1, 2, 3, 4, 5];- 使用解构语法将数组中的值分配给变量。例如，如果你想将数组中的第一个值分配给一个名为
firstValue的变量，可以这样做：
const [firstValue] = myArray;现在，firstValue变量将包含数组中的第一个值。
- 如果你想分配多个值，可以按照数组的顺序在解构语法中指定变量。例如，如果你想将数组的前两个值分配给
firstValue和secondValue变量，可以这样做：
const [firstValue, secondValue] = myArray;现在，firstValue变量将包含数组中的第一个值，secondValue变量将包含数组中的第二个值。
- 如果你只对数组中的某些特定值感兴趣，你可以使用逗号跳过不需要的值。例如，如果你只想获取数组的第一个和第三个值，可以这样做：
const [firstValue, , thirdValue] = myArray;现在，firstValue变量将包含数组中的第一个值，thirdValue变量将包含数组中的第三个值。
这就是在React中解构一个数组的基本步骤。通过使用解构语法，你可以轻松地从一个数组中提取所需的值，并将它们分配给变量，以便在React组件中使用。
相关·内容
我尝试从Employee ID字段中获取值，并将其添加到JSON中的对象属性employee：{id:}中。JSON中的其他元素工作得很好，这是我无法理解的嵌套元素。 这是为员工提交工时记录卡的应用程序。后端如果是用java编写的。我已经编写并测试了API。现在只想用React编写一些UI代码。 import { Component } from "react";
import {Form, Row, Col, Button} from 'react-bootstrap';
import axios from 'axios';
class T
浏览 7提问于2021-07-09得票数 0
我将登录身份验证功能和导航功能放在onsubmitandler中。"/“需要cookie中的一个令牌值，以便它可以转到路由器。但是，如果您查看我的代码，在执行setCookie并发生错误之前，它会转到"/“。我希望确保‘导航(“/”；’‘是在执行setCookie之后执行的。
const [cookies, setCookie, removeCookie] = useCookies("token");
const onSubmitHandler = (event) => {
event.preventDefault();
const
浏览 5提问于2022-02-02得票数 0
我非常希望使用a_collection_containing_exactly匹配器，但使用参数中的数组，而不是直接写入值，如下所示
contract_ids_subset = order_summaries_subset.map {x{x{c= c.contract_id.to_i}.compact
允许(船运:所有者：：Api：：Helper).to.to delivery_date) { order_summaries_subset }
(假定contract_ids_subset = 11111,22222,99999 )
如果我硬编码a_collection_containing_ex
浏览 3提问于2017-11-14得票数 0
回答已采纳
2回答
如何从道具中获取位置？ function TobaccoLine({ match, props }) {
const activeTab = useSelector(state => props.location.state ? props.location.state.activeTab : 0);
...
} 道具未定义。 ReactJS v16.13.1
浏览 31提问于2020-06-09得票数 0
具有如下类型的接收useState数组的React.FC函数 const TupleFn: React.FC<[boolean, (value: boolean) => void]> =
(([open, setOpen])) =>{} 我知道我可以使用对象类型并将数组命名为prop，如下所示 { control: [k, (value: k) => void] } 但是我只想传递一个数组而不是一个对象来分解lambda props中的数组，而不是主体中的数组，如下所示 (([open, setOpen]) => {} 而不是像这样 (control) =
浏览 47提问于2021-07-04得票数 1
回答已采纳
3回答
我们在这里写代码的方法是什么
const {
month,
} = this.state;
在这个特定的代码块中？
previous() {
const {
month,
} = this.state;
this.setState({
month: month.subtract(1, 'month'),
});
}
浏览 0提问于2018-01-04得票数 0
我有一个onChange函数，我试图通过索引更新数组optionUpdates，它位于sentdata内部，因为我已经将索引传递给了onChange函数。
假设我从postdata内部的option更新输入字段的任意两个值，因此输入名称，即具有更改的值和order的orderStatus应该保存在optionUpdates内部
例如:假设我在orderStatus值的options内部更新了postdata的选项1和选项3，那么位于sentdata内部的optionUpdates应该如下所示
optionUpdates: [
{
Order: 1,
orderStatus: "
浏览 0提问于2020-06-24得票数 0
我有一个子组件，它有一个按钮，发送给传递函数的函数(最后我想给出一个命令来刷新数据库中的列表，但这对于理解问题并不重要)
function Connecting ({** refreshList **}) {
handleClickVariant = () => {
axios.post .....
** refreshList (); **
};
<Connecting refreshList = {refreshList2} />
它工作得很好！
问题是我什么时候也想得到支持者的道具
funct
浏览 21提问于2021-06-03得票数 0
回答已采纳
我想知道是否有可能解构数组(在我的例子中是x)并创建别名，以避免保留关键字的问题。
这里有一个例子，但它给了我一个错误。知道怎么解决吗？谢谢
const mk = (data) =>
data.map((x, idx) => {
const [a, b, for:xxx, d] = x
return {
a,
b,
for:xxx, // I want create an object with for property name
d
}
浏览 0提问于2019-05-07得票数 0
回答已采纳
我已经看到了const的使用，如下面ReactJS中的代码所示。到目前为止，我知道这是关于从这个和中破坏
场景1
class DoSomething extends Component() {
constructor() {
this.state = {
jump: ''
}
}
function somethingSmall() {
// I can access the state with the declaration that uses the curly braces
const { jump } = thi
浏览 3提问于2019-12-03得票数 2
我在typescript和react中使用了如下的map方法。 const final = result.map(({id,name}) => ({id, name})); 在这里我得到类型错误“绑定元素id隐式任何类型”“绑定元素名称隐式任何类型” 这里的id和name是字符串。我如何在这里指定它 我试着去做 const final = result.map(({id: string, name:string}) => ({id, name})); 但这似乎不太对。 有人能帮我一下吗。谢谢。 我是个打字新手。
浏览 17提问于2021-02-09得票数 1
回答已采纳
我只是在学习reactjs和javascript，并尝试用我拥有的数组数据来呈现一个表。
我为material找到了一个示例，说明他们是如何做到这一点的，但是有一个常量数组。
我的数组对象如下所示: array = in detail : Array>
0 {RowNumber: 1, AssetId: 324, TagNumber: "", SerialNumber: "776", …}
1 {RowNumber: 2, AssetId: 233, TagNumber: "", SerialNumber: "32", …
浏览 1提问于2019-07-18得票数 0
回答已采纳
3回答
带条件的MongoDB排序
、、、、
我有这样的收藏：
{
"_id" : 13965 ,
"name" : "p 1",
"sort_order" : 0,
"quantity" : 5
}
{
"_id" : 8000 ,
"name" : "p 4",
"sort_order" : 500,
"quantity" : -10
}
{
"_id" : 13980 ,
浏览 6提问于2022-01-10得票数 1
作为reactJs的新手，正在努力理解如何调用带参数的箭头函数。
我在file1.js中定义了这个函数
const fetchSavedFilters = ({ tenantId, id }) => {
client.query({
query: GET_SAVED_FILTER,
variables: { tenantId: tenantId, id: id, },
fetchPolicy: "network-only",
}).then(
resp => {
console.log(
浏览 7提问于2021-03-07得票数 0
我有一个像这样的收藏品：
{
"id": "id1",
"tags": ['a', 'b']
},
{
"id": "id2",
"tags": ['b', 'c']
},
{
"id": "id3",
"tags": ['a', 'c']
}
如何根据“标记”数组中的每个元素进行分组的查询，结果如下所示：
{'a':
浏览 2提问于2021-11-09得票数 1
回答已采纳
我使用的是NodeV5.4.1，我不能使用中概述的for..of循环对映射的键和值进行交互。
使用以下代码：
var map = new Map();
map.set(1, 'hello');
map.set(2, 'world');
for (var [key, value] of map.entries()) {
console.log(key + " = " + value);
}
导致语法错误：
for (var [key, value] of map.entries()) {
^
SyntaxError:
浏览 0提问于2016-04-20得票数 9
回答已采纳
我需要你的帮助，当我单击红色圆圈上的3个按钮时，它抛出了一个名为'...不是一个函数，尽管我认为关闭一个模式需要一个useState钩子来设置布尔值来关闭它。我说错了吗？如果我没有错，那么如何解决它，请帮助我！~
以下是我的代码
import {createContext, useState, useContext, useMemo} from 'react'
import { AuthContext } from './AuthProvider'
import useFirestore from '../hooks/useFirestor
浏览 0提问于2021-12-03得票数 0
我试图在一个映射函数中进行映射，但是我得到了一个错误，说data.map不是一个函数。
代码如下：
<table class="table table-bordered table-striped" style={{ fontSize: 10, fontWeight: "bold" }}>
<tbody>
{
浏览 23提问于2021-03-05得票数 0
回答已采纳
1回答
我试图将结果从一个MongoDB查询传递到另一个查询，但是结果在对象中，我需要它作为一个数组。示例：
var locId = db.getCollection('locations').find({country:"France"}, {_id:1}).toArray()
如何将结果传递给另一个查询：
db.getCollection('products').find({locId: {$in: locId }})
第一个查询的结果如下：
array[1] [
obj[0] {_id: LocId123},
obj[1] {_id: LocId4
浏览 3提问于2020-08-10得票数 2
回答已采纳
1回答
我正在用app构建一个项目(使用创建-反应-应用程序来创建项目)，最近在运行时遇到了以下错误
npm启动
错误如下(我正在使用Ubuntu )：
> linguana@0.1.0 start /home/george/code/linguana
> react-scripts start
/home/george/code/linguana/node_modules/react-scripts/scripts/start.js:33
const {
^
SyntaxError: Unexpected token {
at exports.runInT
浏览 5提问于2017-09-05得票数 1
回答已采纳
2回答
我使用垂直呈现数据。Docs提出了一种硬编码数据的方法，但我在数组中有数据。
Docs有以下示例：
<MobileTearSheet>
<List>
<ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
<ListItem primaryText="Starred" leftIcon={<ActionGrade />} />
<ListItem primaryText="Sent m
浏览 2提问于2017-06-13得票数 3
回答已采纳
我刚刚开始学习React，我在函数组件中的if语句(如下面的ChooseInputType.js所示)正在返回'false‘，尽管我希望它返回'true’。我的简化代码在下面--有人能发现问题吗？如果相关的话，我想使用钩子而不是类！
Form.js
import React from 'react';
import ChooseInputType from './ChooseInputType';
function App(){
return(
<ChooseInputType
type=
浏览 1提问于2020-03-11得票数 1
回答已采纳
2回答
我有一个二维数组，如下所示：
var colors = [["red", "blue"], ["green", "black"], ["orange", "purple"]];
如何运行一个简单的方法来组合每个数组中的元素，如下所示：
[["red blue"], ["green black"], ["orange purple"]]
浏览 10提问于2022-08-31得票数 0
回答已采纳
1回答
求出每类产品总销售量的有效方法
、、、、
我有一个问题如下。我需要得到每一类产品的总销售量。一个产品可以分为多个类别。一个类别还可以包含单个类别中的多个产品。我有以下计划：
//Categories scheme
{
name: {
type: String,
required: [true, "The Category name is required"],
unique: true,
}}
//Products
{
name: {
type: String,
required: [true, "The pro
浏览 1提问于2021-01-11得票数 1
回答已采纳
我将这个接口定义为我的状态：
interface State {
id: string;
name: string;
description: string;
dimensionID: string;
file: File | null;
operator: string;
isFormValid: boolean;
filename: string;
};
我有一个简单的更改处理程序：
update = (event: React.FormEvent<HTMLInputElement>): void => {
const { na
浏览 1提问于2018-10-29得票数 9
1回答
我想知道在析构嵌套数组时如何分配默认值。我有一个嵌套数组[12, 25, 1, 6]的myArr数组 let myArr = [11, 100, 33, [12, 25, 1, 6], 77] 我想在析构myArr时为four分配一个默认值，如下所示 const[ one = 999, two = 999, three = 999, four = [ ], five = 999] = myArr 我还想解构嵌套数组的元素。 const[ one = 999, two = 999, three = 999, [innerOne = 1, ...rest ], five = 999]
浏览 27提问于2020-01-04得票数 4
回答已采纳
1回答
我有一组图像保存在我的消防站文档中。我想以幻灯片的形式显示所有的图片，我发现这个反作用包可以做到这一点，react-simple-image-slider。
我的图像以这种方式保存在消防局里：
现在我以这种方式检索它们，以便将它们添加到滑块中：
const [imgUrls, setIMGUrls] = useState([]);
const imageList = []
firebase.firestore().collection("Properties").where("propertyID", "==", propID).
浏览 4提问于2022-02-23得票数 1
回答已采纳
我一直在尝试学习react-native的udemy教程。我被这个错误卡住了，如iphone图像所示。我的应用程序的代码如下:当我转到应用程序上显示错误的文件时，就会出现这个问题 import React, { useReducer } from 'react' ;
import {View, StyleSheet, Text, FlatList} from 'react-native';
import ColorCounter from '../components/ColorCounter';
const COLOUR_COUNT = 1
浏览 12提问于2019-10-15得票数 1
1回答
目前，我正努力使用testcafe和测试库编写一个测试。
由于站点的性质，我们不能在名称/标签查询中使用标准测试库角色，因为我们的测试是跨50+不同的地区运行的，并且我们不希望在测试期间请求翻译。
为了绕过这个问题，我获取了我的表单容器，然后使用TL的内部和查询函数检索我的两个输入字段。
棘手的是，我被返回了两个输入字段，我想对它们进行分解以单独使用它们，但是我得到了以下错误：
类型'Selector‘必须有一个'Symbol.iterator’方法，返回一个iterator.ts(2488)
我的选择器目前看起来如下所示：
// This is the contain
浏览 7提问于2022-08-24得票数 0
回答已采纳
1回答
有一个带有嵌套数组的文档，只想按customerId排序，然后按productList.productId排序，然后按升序排序productList.itemList.id。MongoDb版本为3.0.14。
到目前为止，我尝试过这样做，并且查询没有按照预期对集合进行排序：
db.file_old.find({}, {
customerId: 1,
"productList.productId": 1,
"productList.itemList.id": 1
})
.sort({
浏览 3提问于2020-08-17得票数 1
回答已采纳
因此，我使用IMDB电影和评论数据集，其中一个数据示例如下：
{
movie_id: tt1982833,
genre: ["Action", "Adventure", "Sci-Fi"],
...
}
我想做的是统计适合每一种类型的电影数量，但是我很难把这个类型分解成单独的元素，而不是整个数组。目前我有：
db.movies.aggregate([
{$group: {"_id": "$genre", "count": {$sum: 1}}}
])
我怎样才能改变这一点来解释一部电
浏览 3提问于2019-11-19得票数 0
回答已采纳
1回答
我想通过api得到鸡尾酒的名字。我带来了数据。但是我不能读取里面的属性。 这是JSON {
"drinks": [
{
"idDrink": "12784",
"strDrink": "Thai Iced Coffee",
"strCategory": "Coffee / Tea",
"strIBA": null,
"strAlcoholic": "Non alcohol
浏览 17提问于2020-12-30得票数 0
回答已采纳
我正在做一个使用ReactJs，NodeJs和Mysql的web dev。我在使用axios显示获取数据时遇到了问题。
下面是我的API：
app.get('/enduser',(req, res) => {
let ENDUSER_QUERY = "SELECT * FROM enduser_tbl";
let query = dbConn.query(ENDUSER_QUERY, (err, results) => {
if(err) {
console.log(err)
} else {
浏览 2提问于2020-02-18得票数 0
我将app.js作为父对象，将uploadlist.js作为子对象。我正在向uploadlist.js传递在app.js中定义的"userid“。这是我的尝试：
app.js：
export default class App extends Component {
state = {
userrole : '',
custid : ''
};
componentDidMount() {
if(localStorage.login)
{
const currentuser = JSON.par
浏览 3提问于2021-06-07得票数 0
我需要你的帮助。考虑到下面的结构，我需要以一种方式查询文档，以获得给定供应商的所有“产品”。
{
"supplier" : [
{"name" : "supplier 1",
"products" : [
{ "name" : "product 1" }
{ "name" : "product 2" }
]
},
浏览 2提问于2020-12-21得票数 0
回答已采纳
1回答
我有一个MongoDB模式，如下所示
const ProductModel = new Schema({
subcategory: {
type : mongoose.Schema.Types.ObjectId,
ref : "Subcategory",
},
product_name: {
type: String
},
description: {
type: String
},
price: {
type: Number
},
});
和一个子类别模式：
const SubcategoryModel = new Schema({
浏览 5提问于2021-09-13得票数 0
回答已采纳
我正在尝试使用props更改输入的id，但我也使用了一个onChange事件。 import React from "react";
function Toggle({ onChange }) {
return (
<>
<input type="checkbox" id="switch" onChange={onChange} />
<label htmlFor="switch"></label>
</>
);
}
ex
浏览 26提问于2021-09-13得票数 0
回答已采纳
我正在学习reactjs，我看到很多人都在写，例如
class Trees extends Component {
render() {
const { plantTrees } = this.props;
return( ...
我想知道为什么使用const {} = this.props？使用它有什么好处吗？在render函数中初始化const变量的目的是什么？
浏览 0提问于2018-06-25得票数 12
回答已采纳
2回答
根据ES6的说法，可以使用从自定义生成器返回的数组解构。然而，现在我不能想出一种方法来用简单的对象解构来做同样的事情，因为我认为这应该是可行的(使用Babel和Polyfill)：
class Test {
constructor () { this.props = {a: 1, b: 2}; }
*[Symbol.iterator]() { yield* this.props; }
}
const {a, b} = new Test();
这实际上应该是可行的，不是吗？因为它总是简单地为a和b返回undefined。
浏览 2提问于2017-09-01得票数 3
我正在尝试创建一个表组件，但无法从material-ui导入TableContainer组件：
Attempted import error: 'TableContainer' is not exported from '@material-ui/core'.
我需要它出现在页面顶部，如下所示：
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { TableRow, TableHead, TableCo
浏览 8提问于2019-12-21得票数 2
1回答
试图为我的手推车还原器创建一个单元测试。这是还原器，项目将被添加到item属性中：
const initialState = {
items: [],
cartOpen: false,
newMonthlyCost: 0,
currentMonthlyCost: 0,
showNextButton: false,
orderConfirmed: false
}
const Cart = (state = initialState, action) => {
switch (action.type) {
ca
浏览 1提问于2016-12-16得票数 0
回答已采纳
我不确定这是否是特定于Mozilla的JS语法，但我经常发现变量是这样声明的，例如，在中
var { Hotkey } = require("sdk/hotkeys");
并且在各种chrome Javascript (用let语句代替var)中，
let { classes: Cc, interfaces: Ci, results: Cr, utils: Cu } = Components;
我发现它非常混乱，但我找不到任何关于这两种语法的文档，甚至在上也找不到。
浏览 1提问于2013-03-08得票数 132
回答已采纳
下面是我的代码中eslint不喜欢的部分。 this.attributes.mb.start_date = this.dateInstance.config.defaultDate.split('T')[0] 我如何重写它来克服这个错误？
浏览 75提问于2019-02-22得票数 11
回答已采纳
我正在研究MongoDb聚合。我是芒果管道的新手，在某一点上被困住了。我在MongoDB集合中有如下所示的文档。我无法猜测如何取得预期的结果：
{
resource: {
name: "PROJECT_01",
version: 1,
owner: ""
},
app_info: [
{
app_key: "APP_01",
size: 20,
metadata:{
deploy
浏览 0提问于2021-01-01得票数 2
回答已采纳
3回答
response是我的API返回的array。我将此variable传递给另一个组件以在UI中创建表。
const [response, setResponse]= useState([]);
useEffect(() => {
(
async () => {
await axios.get('http://localhost:3000/api/certificates').
then(response=>{
setResponse(response.data);
浏览 4提问于2021-11-26得票数 1
我目前正在为我的项目使用react.js。我正面临着一个问题，即我无法呈现列表。错误是：
index.js:5 Uncaught TypeError: Invalid attempt to spread non-iterable instance.
这是我尝试呈现数据的代码：
<Row justify="center" align="middle" style={{padding:50}}>
{(this.props.transition_approvals_hooks).map
浏览 16提问于2020-05-24得票数 0
1回答
使用我在链接中提供的查询，filteredAccording部件和categorizedBy正在按预期工作，但我在findDistinct部件中面临问题。
在mongodb中，我有以下数据：
{
"_id": 10001,
"university": "SPYU",
"Courses": [
"English",
"French"
],
"dept": [
浏览 4提问于2021-02-12得票数 3
回答已采纳
1回答
我遵循一个教程来制作下拉菜单，但我被卡在中间，因为我没有像导师在教程中那样使用"props“关键字。我把道具直接当作没有道具的论点来传递。当我想实现不带道具的{open && children}时，我得到了一个错误，即没有定义子级。
这是我正在学习的教程，以及我得到错误的那一分钟
这是我遇到问题的NavItem.js组件
import React, { useState, useEffect } from 'react';
function NavItem({ icon, title, ...props }) {
const [opened, s
浏览 1提问于2022-02-08得票数 0
刚开始学习钩子，就遇到了这个问题。我尝试将相同的属性添加到数组中的每个对象，如下所示： const array = [ { 'a': 1,
'b': 2,
'c': 3},
{ 'd': 4,
'e': 5,
'f': 6} ]
const [ example, setExample ] = useState(
浏览 50提问于2020-10-22得票数 0
回答已采纳
假设我有一个javascript模块first_file.js
var first = "first",
second = "second",
third = "third";
module.exports = {first, second, third};
如何在一行中将这些导入到另一个文件中？以下代码仅导入third
var first, second, third = require('./path/to/first_file.js');
浏览 2提问于2016-01-09得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
