当数组长度为0时解析数组中的元素(MongoDB，React，Axios)
当数组长度为0时解析数组中的元素是指在编程中处理一个空数组时的情况。具体来说，我们可以使用不同的编程语言和工具来解析数组中的元素，如MongoDB、React和Axios。
在MongoDB中，可以使用聚合管道操作符$unwind来解析数组中的元素。$unwind操作符将数组字段拆分为多个文档，每个文档包含数组中的一个元素。这样可以方便地对数组中的元素进行查询和分析。更多关于$unwind操作符的信息可以参考腾讯云MongoDB文档中的介绍：MongoDB $unwind操作符。
在React中，可以使用map函数来解析数组中的元素。map函数可以遍历数组，并对每个元素进行处理，返回一个新的数组。通过在map函数中定义适当的逻辑，可以对数组中的元素进行解析、转换或其他操作。React官方文档提供了关于map函数的详细说明和示例：React中的map函数。
在Axios中，可以使用Promise和async/await来解析数组中的元素。Axios是一个基于Promise的HTTP客户端，可以用于发送异步请求。当使用Axios获取包含数组的响应数据时，可以使用async/await语法来等待响应的解析和处理。通过对返回的数组进行遍历和操作，可以解析数组中的元素。腾讯云提供了Axios的相关文档和示例：Axios文档。
总结起来，当数组长度为0时解析数组中的元素可以使用不同的工具和技术，如MongoDB的$unwind操作符、React的map函数和Axios的Promise和async/await。这些方法可以根据具体的需求和场景来选择和应用。
相关·内容
我正在编写MERN应用程序，我几乎完成了它。但是，我在用数据显示单个客户页面时遇到了问题。
我的App.js
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import CustomersList from "./components/customers-list";
import customerRewards from './components/customerRewards';
im
浏览 2提问于2020-11-12得票数 1
回答已采纳
1回答
好了，我已经从react-semantic-ui中实现了一个可搜索的多选下拉菜单。(https://react.semantic-ui.com/modules/dropdown/) 它通常工作在前端，所以你可以在输入栏中输入搜索查询，结果会被实时过滤。 我想实现后端搜索，这是通过使用带有searchQuery变量的axios调用来完成的。问题是，每次按下一个键时，onSearchChange都会被激发来进行新的搜索，这会重新呈现下拉菜单，从而关闭dropdown并清除查询。 返回的数据是一个数组，该数组将搜索与该按下的键相匹配，但这不会在新的下拉选项中呈现，并且在重新打开dropbox时，搜
浏览 14提问于2020-07-21得票数 1
回答已采纳
我试图从存储在MongoDB中的集合中获取数据。当我试图获取失眠症的数据时，一切都很好。当我使用axios发出请求时，会得到以下错误：
未定义的TypeError:无法读取未定义的属性(阅读“游戏”)
我用的是定制钩子
import { useEffect, useState } from "react";
import axios from "axios";
const useFetch = (url) => {
const [data, setData] = useState([]);
const [loading, setLoading] = us
浏览 4提问于2022-10-14得票数 0
回答已采纳
你好，我有一个关于componentDidMount内部fetch调用的问题。下面是一个示例代码：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(async () => {
const result = await axios(
'https://hn.algo
浏览 50提问于2020-02-24得票数 0
回答已采纳
1回答
我正在使用React.js复制Netflix，以学习React.js。我从TMDb集成了一个API，对于横幅图像、名称和描述，我有一个由20个对象组成的数组，其中包含20个电影的所有细节，当页面被刷新时，我需要将横幅更改为数组中的另一个随机电影。我不知道如何选择一个随机对象的数目。请帮我做这个。
这是我的密码：
import React, { useState } from 'react'
import './Banner.css'
import {useEffect} from 'react'
import {API_KEY,imageUr
浏览 1提问于2021-06-07得票数 0
回答已采纳
目前，我正在从API获取数据，并将这些结果存储到一个数组中。问题是，当我将数组映射到子组件时，它永远不会执行，因为数组一开始就是空的。当数组中有数据时，我如何执行数组映射。我尝试了内联条件，比如做{array.length >0?//做数组映射}。我还尝试将数组设置为全局数组和父组件的状态数组。
//React路由器
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Main from '../components/Main
浏览 5提问于2017-02-26得票数 0
我正在努力寻找黑客新闻。我只需执行一个console.log(res.data.hits)操作，就可以在控制台中工作。如果你在搜索中输入" apple“，你会看到控制台中弹出了一堆注释，其中包含了apple这个词，所以这个部分可以工作。不过，我想知道如何将它显示在DOM中。我一直试图将数据添加到一个国家的数组中，但它似乎并不喜欢它。这很奇怪，因为我在另一个项目中以完全相同的方式执行了另一个API调用，而且这个API的数据结构看起来是相同的。下面我将重新计算不同的代码块。第一个是不同的项目，我调用了随机用户API，就像我试图调用HN一样。
随机用户API：(作品)
component
浏览 3提问于2020-03-29得票数 1
回答已采纳
2回答
尝试显示数据以做出反应
、、、
React的新手，尝试显示来自MongoDB的数据(在引导模式中)，以响应axios ajax请求。邮递员证明是正确的。React抛出"TypeError: this.state.reviews.map is not a function"，这告诉我它不是数组，因为.map()是一个数组方法，但我将状态保存为数组。对如何在React中显示数据感到非常困惑，有谁能举个例子说明如何正确地显示数据吗？搜索了这里，文档，谷歌，还是不明白。 ? import React from 'react';
import Axios from 'axios'
浏览 6提问于2021-01-31得票数 1
我试图筛选一个具有实时搜索功能的国家列表，但是每当我按下backspace时，它都不会更新状态数组。
所以我尝试在上搜索我的问题的潜在解决方案，在这个例子中我使用了相同的代码，但是它在我的例子中不起作用。
以下是搜索字段存在的整个组件。
import React, { useEffect, useState } from 'react'
import CountryList from '../components/CountryList';
import axios from 'axios'
import SearchForm from '
浏览 2提问于2019-04-20得票数 0
回答已采纳
从post组件获取注释数组并将其传递给comments组件之后，日志开始在下面的屏幕截图中显示错误
组件是：
import React, { Component } from "react";
import axios from "axios";
import Comments from "../components/comments";
class Article extends Component {
constructor(props) {
super(props);
浏览 1提问于2018-10-14得票数 3
回答已采纳
2回答
在这里，我的代码是从api获取数据，并希望将其显示在页面上。
import React, { useState, useEffect } from "react";
import '../all.css';
import Axios from "axios";
const AllProduct = () => {
const [products, setProducts] = useState([]);
const fetchProducts = async () => {
const { data } = await A
浏览 7提问于2022-04-21得票数 -1
1回答
import React,{Component} from 'react';
import Pagination from "@material-ui/lab/Pagination";
import axios from 'axios';
class Limit extends Component {
constructor(props) {
super(props)
this.state = {
api: [''],
perPage:2
浏览 4提问于2022-02-28得票数 0
回答已采纳
2回答
我使用axios将数据从无头Drupal 8通过JSONAPI Drupal模块获取到我的React组件。
当我通过Postman发出完全相同的获取请求(URL和headers是相同的)时，我得到和数组300+对象，但是当从React获取时，响应仅限于50个对象。
是什么限制了我的数组长度，以及如何覆盖这个限制以获得完整的数组？
这个请求被放置在我的React项目的componentDidMount()中，这个项目是由Create创建的：
axios({
method: 'get',
url: `${prodURL}/jsonap
浏览 0提问于2018-10-13得票数 1
回答已采纳
我在谷歌上找不到答案，所以我想你们可能会帮我。
所以我尝试了componentWillMount()，componentDidMount()，但它似乎在我收到获取的字符串之前调用了substring方法。
import React, { Component } from 'react';
import axios from "axios";
class Home extends Component {
constructor(props){
super(props);
this.state = {
浏览 27提问于2018-08-14得票数 0
回答已采纳
我正在做一个MERN堆栈项目。我花了大概一个月的时间。我使用parcel创建了react应用程序，并且一直工作到昨天。根据请求，我将其更改为create-react-app。 因此，在一段时间内，它在create-react-app中运行良好。但是，当我构建项目后，所有的map()函数都显示错误。 这是我的mongoDB收藏的JSON文件。 {
"_id": {
"$oid": "60db452a8fe38d2860d03426"
},
"description": "Sample desc."
浏览 20提问于2021-07-03得票数 0
2回答
我尝试从API中获取一些数据。API的格式如下： [
{
"1": {
"appid": 1,
"name": "bmw"
},
"2": {
"appid": 2,
"name": "mercedes"
},
"3": {
"appid": 3,
"name": "tesla"
浏览 20提问于2020-12-22得票数 2
回答已采纳
1回答
import React, { useState, useEffect } from 'react';
import './Login.css';
import { Link, useHistory } from 'react-router-dom';
import axios from 'axios';
function Login() {
var history = useHistory()
const [data, setData] = useState([])
const [user, setU
浏览 1提问于2021-05-18得票数 0
回答已采纳
3回答
我试图在从axios返回的响应对象中呈现一个对象数组。 import React, { Component } from "react";
import axios from "axios";
class Bids extends Component {
state = {
adminPosts: [],
};
componentDidMount() {
this.getPosts();
}
getPosts = async () => {
let posts = await axios.get(
浏览 42提问于2020-06-11得票数 0
2回答
我有一个场景，比如需要在function函数组件中调用API。如果可能，如何返回结果。我可以调用API，但是响应在变量中是可用的。请指教
我的示例代码
import React from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import axios from 'axios';
const Table = (props) => {
const getData = [axios.get("
浏览 0提问于2019-11-14得票数 1
回答已采纳
2回答
今天我将向你解释我的问题:下面的代码运行得很好，我得到了我的数据库，然后我使用了一个map函数，所以一切都很好。我的问题和下一个问题，我在其中有一个表，我有一个包含数组的对象。此表的格式如下：
[{"title":"Lagunitas IPA (Demi-Pinte","quantity":2}]
而且可以恢复两段数据中的一段，因为当我在数组上映射时，我可以获得所有数据。
你有办法解决这个问题吗？
import React, { Component } from 'react';
import { CardTex
浏览 0提问于2020-02-07得票数 1
我一整天都在尝试创建一个checkAuth函数，后端是创建一个令牌并将其保存在mongodb中，当有人登录令牌时，令牌会被覆盖到新的令牌中，所以一次只能登录一个会话。但是，我的checkAuth函数总是返回true。
CheckAuth.js
import React from "react"
import axios from "axios"
const checkAuth = async () => {
const userInfo = localStorage.getItem("userInfo");
浏览 0提问于2021-08-27得票数 0
1回答
在我的代码中，我在InterestBox上使用一个单击事件来更新InterestBox的外观并更改InterestBox父级的状态。
但是，当我使用React工具检查元素或试图向API发送请求时，state.interests总是空的。但是，当我在控制台中记录状态时，它会显示一个长度为0的数组，但包含所有正确的值。
我试图找出我的代码出了什么问题，但是我认为我需要一个外部的外观来找出什么是错误的。
import axios from 'axios';
import * as Cookies from 'js-cookie';
import React, { Co
浏览 3提问于2019-12-30得票数 0
回答已采纳
我和一起创建了一个项目，
我试着用React钩子，
在下面示例中，
句子console.log(articles)无休止地运行：
import React, {useState, useEffect} from "react"
import {InfiniteScroller} from "react-iscroller";
import axios from "axios";
import './index.less';
function ArticleList() {
const [articles, setArti
浏览 0提问于2018-12-30得票数 3
我正在从我的express后端获取和显示一组帖子，它以"Blog“组件的形式显示。
组件有一个按钮从后端删除它，然后重新获取帖子，每当我单击delete按钮时，状态从“空闲”更改为“加载”到“成功”，然后在重新获取数据时将其删除。
这是可行的，但当它被删除时，下一篇文章将“成功”显示为状态。为什么？
BlogPost.jsx：
import React from "react";
import axios from "axios";
import { useQueryCache, useMutation } from "react-query
浏览 2提问于2020-10-25得票数 3
回答已采纳
3回答
我是新手，当我创建一个项目时，我遇到了一个非常奇怪的事件，我的代码。它具有setState的异步特性，它不允许我按照我希望的那样在页面上呈现数据。我正在尝试将我已经在数据库中的文件显示到我的网页上。但是，由于状态是在一段时间后设置的，因此我无法使用map函数将文件呈现到屏幕上，因为当调用它时它是未定义的。
我实现了一个get方法，以便获得我想要显示的文件的json响应。但是当我挂载我的组件和文件的setstate时，它显示出它没有任何价值，我知道它是异步的，但是我不知道如何处理它，这样我就可以使用map在网页上显示。
我的代码如下：
import React, {Component} from
浏览 3提问于2020-07-30得票数 1
回答已采纳
import React, { Component } from "react";
import axios from "axios";
import ReactPlayer from "react-player";
export default class DoctorData extends Component {
state = {
sidebarOpen: true,
courseData: [],
renderData: []
};
componentDidMount() {
let jw
浏览 6提问于2019-10-31得票数 2
回答已采纳
3回答
反应响应获取数据
、、
我想将Axios响应的数据添加到我的useState数组中。问题是，我不知道如何从The ()函数中获取数据。基本上，我想要做的是保存Axios响应，以便我可以在我的数组中使用它。(我第一次试着做出反应)
for (var i = 1; i <= props.max; i++) {
const response = Axios.get("http://localhost:3001/content", {id: 1});
response.then((res) => {
console.log(res.data[0].title)
浏览 3提问于2022-04-13得票数 1
回答已采纳
我正在用React和MongoDB写博客。我从MongoDB检索数据，下面是我的组件：
import React, { Component } from 'react';
import axios from 'axios';
export default class Post extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
truncateText = text =>
浏览 25提问于2019-10-25得票数 0
1回答
我使用React将数据从API导入到数组中，并得到了错误TypeError:未定义的电影。
这是我的完整代码：
import React, { useEffect , useState } from 'react';
import axios from './axios';
import "./Row.css";
function Row({ title, fetchUrl, isLargeRow = false}) {
const [movies, setMovies] = useState([]);
const base_u
浏览 0提问于2021-08-07得票数 0
回答已采纳
我已经做了一个黑客新闻搜索的副本，但当我在我的网站上时，我不能显示来自API的所有故事。根本没有故事出现。我必须在搜索栏上输入一些内容才能显示所有内容。
我已经使用axios获取了数据，我对集合执行了console.log操作，似乎已经成功获取了数据，因为我可以在控制台上看到该集合。
github存储库：
网址：
我的App.js文件(src/containers/App.js)的开头：
import React, { Component } from 'react';
import Navbar from '../components/Navbar/Navbar&#
浏览 6提问于2019-08-02得票数 0
回答已采纳
我从Node发送数据来在数组对象中响应JS。在response中，当我设置响应数据时，我得到了一个错误：“对象作为一个are子对象无效(找到:带有键{eventName、eventDate、商船}的对象)。如果您打算呈现一个子集合，那么使用一个数组代替。”
我检查了一个堆栈溢出帖子。我也以同样的方式设置值，但我得到了错误。
下面是我从Node发送的数据。
[
{
eventName: 'Sankranti',
eventDate: 2021-01-21T00:00:00.000Z,
merchantid: 'tp012345'
}
浏览 1提问于2021-01-19得票数 1
回答已采纳
我正在使用Axios加载本地API。在.then上，如果我console.log结果，我会在我的控制台中得到结果。
然后，我以'products‘的名称将其赋值给state。在DOM中，如果我尝试引用它，我会得到错误：
TypeError: this.state.products.map is not a function
这会有什么原因呢？我将API调用包装在一个ComponentWillMount()中，但它仍然不能工作。
下面是我的代码：
App.js
import axios from "axios"
import React from "react&#
浏览 14提问于2021-03-11得票数 0
1回答
我可以很好地显示“父”数据，但是嵌套对象给我带来了太多麻烦。我收到了“对象作为React子级无效”的错误，但我在研究中尝试的任何东西都不起作用，例如使用.map。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {useState, useEffect} from 'react';
import axios from 'axios';
function GetWeather() {
浏览 0提问于2021-04-17得票数 0
我在学习React，我用表单做了一个页面。
这个表单应该通过axios从后端获取数据。我需要帮助，因为无论我做什么，数组都不会显示在select选项中。
数据示例：
{"country"：“德国”"code"：112 }
import React, { Component } from 'react';
import { Row, Col, Button, Form } from 'react-bootstrap';
import axios from 'axios';
class Form extends Re
浏览 0提问于2019-09-03得票数 4
1回答
在导出函数时，我尝试将从axios获得的值放到div中 import React from 'react';
import axios from 'axios';
function callServer() {
axios.get(`http://localhost:${process.env.REACT_APP_SERVER_PORT}`, {
params: {
table: 'querotable',
},
}).then((response) => {
const resp = res
浏览 30提问于2021-03-22得票数 1
回答已采纳
1回答
我有一个React组件，当我单击play时，它遍历存储在数据库中的id数组(来自google )，并将id设置为<source>标记的src=，并播放来自该URL的声音。但这不像预期的那样有效。但是，当我将整个URL硬编码到src中时，它就能工作了。
import React, { useState, useEffect } from 'react';
import Axios from 'axios';
export default function Sound() {
const [songs, setSongs] = useState([
浏览 0提问于2019-08-27得票数 0
回答已采纳
2回答
我在学打字。 我使用了todoList并将api返回值存储在useEffect中，并将其显示在屏幕上，但我得到一个错误，指出接口axios中没有名称。原因是什么？ 谢谢。 import React, {useEffect, useState} from 'react';
import axios from 'axios';
interface todoList {
name: string
age: number
}
function App() {
const defaultProps: todoList[] = [];
浏览 16提问于2021-07-25得票数 1
回答已采纳
我试着解决我的问题，但无法处理。我使用Express JS创建了API，我想显示(映射)我的状态数组。在componentDidMount()中，我更新listOfUsers[]，console.log返回正确的数据。当我想在render()中映射我的数组时，它返回一些错误：
TypeError: this.state.listOfUsers.map不是一个函数
Uncaught : this.state.listOfUsers.map不是函数
警告:不能在未挂载的组件上调用setState (或forceUpdate)。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消c
浏览 0提问于2018-07-15得票数 0
import React,{Component} from "react"
import axios from "axios"
import { List } from "@material-ui/core"
class PostList extends Component{
constructor(props){
super(props)
this.state={
posts:[]
}
}
componentDidMount(){
浏览 2提问于2020-06-11得票数 0
我正在尝试制作一个可以显示一些简单的markdown的组件，但是似乎无法在页面上显示markdown。它甚至没有在HTML中为它创建一个组件。此组件显示正常，并且“Test”显示，但未显示标记。我试着重装我的node_modules，但不起作用，有什么建议吗？ import React, {useState, useEffect} from 'react'
import axios from 'axios';
import {API_DEV_URL, API_PROD_URL} from '../env';
import Markdown
浏览 39提问于2021-06-17得票数 0
回答已采纳
应用程序完全工作，但是控制台返回这个完整的错误是:遇到两个具有相同键的子程序1。键应该是唯一的，这样组件就可以在更新中维护其标识。非唯一的键可能会导致子键被复制和/或省略--这种行为是不支持的，并且可能在将来的版本中更改。
我的后端 laravel返回：
return $customers = DB :: table ('customers')
-> rightJoin ('debts', 'customers.id', '=', 'debts.customer')
-> join (&
浏览 7提问于2020-01-30得票数 1
回答已采纳
我目前正在练习React，并逐渐习惯于图表。 当我使用React图表和调用Axios从在线JSON文件中获取信息时，我遇到了一段艰难的时间。 它可以很好地处理预编程值，但是当使用Axios进行调用时，它不会产生结果。 我对如何以正确的方式将Axios应用于现有代码有疑问！任何帮助都是非常感谢的。 import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";
import axios from "axios";
const he
浏览 14提问于2019-02-06得票数 0
回答已采纳
因此，我有一个api应用程序，它使用axios对我在Swagger上的api发出端点请求。在我的应用程序中，当前get和post调用工作，但不放置或删除。
对于删除调用，我将userID传递到URL中的ID字段：
const onDelete = (userId) => {
axios.delete(`https://localhost:44373/api/Users/${userId}`)
.then(() => {
getData();
})
}
但是在控制台中，它显示了以下
浏览 5提问于2022-01-19得票数 0
回答已采纳
我认为这是一个相当常见的问题，很抱歉再问一次，但对类似问题的回答对我都没有用。使用非常流行的Axios /React教程，我可以使用这个调用来提取和渲染信息-
useEffect(() => {
(async () => {
const result = await axios("https://api.tvmaze.com/search/shows?q=snow");
setData(result.data);
})();
}, []);
如果我把它换成我想要调用的API，它看起来就像-
useEffec
浏览 9提问于2022-06-25得票数 0
我试图通过axios库函数axios.get()读取JSON数据，method.It工作良好，并在控制台中记录正确的用户名，并在呈现方法()中正确设置用户variable.But的状态--它停止工作。链接到。
class TableData extends React.Component {
constructor(props) {
super(props);
this.state = {
users:[],
count: 0
};
}
componentDidMount() {
axios
.get(`htt
浏览 5提问于2017-10-27得票数 1
回答已采纳
我被卡住了。我尝试做一个嵌套的api调用，然后将结果传递给父组件中的state，然后将state作为props传递给子组件。 调用似乎可以工作，属性似乎可以传递(我可以通过控制台将它们从子组件的render方法中注销)，但它们实际上不会在子组件中呈现。 我强烈怀疑我在api调用中犯了一个错误，但我不能确定它是什么。我已经在上面使用了另一个答案作为模板，但没有发生什么事情： App.js中的代码(父级)： import React from 'react';
import atom from './api/atom';
import axios from
浏览 23提问于2020-01-02得票数 0
回答已采纳
1回答
我正在尝试制作一个显示Covid 19数字的应用程序。我希望在呈现组件时显示全局数字，因此我使用了useEffect钩子。当我试图显示global.confirmed时，它会返回一个对象，但是当我试图显示global.confirmed.value时，会得到一个Cannot read property 'value' of undefined错误。我怎么才能解决这个问题？
import React from "react";
import "./App.css";
import axios from "axios";
import
浏览 0提问于2020-08-15得票数 3
回答已采纳
3回答
我编写了一个代码，该代码通过receives接收api，并通过单击时传递id再次在子组件中调用api。但是，在settingState中似乎存在一个问题，即在子组件的useEffect或onClick中使用箭头函数。
如果你能给我一个如何解决它的答案，我将不胜感激。
Users.js
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import UserInfo from './UserInfo';
function Users()
浏览 4提问于2021-08-07得票数 3
回答已采纳
1回答
误差
我拥有存储来自api的响应值的数组的console.log状态，它给了我预期的结果，当我解析这个响应并对被解析的数据使用字符串、浮点操作时，它正在添加额外的未定义的NaN %。
控制台
码
import React from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import axios from 'axios';
export default class OutputScreen extends React.Componen
浏览 2提问于2018-02-13得票数 0
回答已采纳
2回答
我正在努力让自己的头脑认清承诺。我想我理解这个概念，但我无法让他们在后端工作。 我读过几篇stackoverflow帖子。我仍然看到一些只有几个月大的，所以我猜我不是唯一的一个:) 具体地说，我需要关于如何在代码中传递已解析的promise的结果的帮助。在下面的代码中，我从starwars获取了一个JSON文件，并希望将其写入mongodb atlas集合。 我使用axios.get，它返回一个promise。然后我使用.then解析它，然后在mongoDB集合上使用insertOne。 在前端，例如在React中，它按预期工作，您可以通过在.then函数中使用setState来使用setS
浏览 31提问于2020-01-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
